html table冻结首行,Html Table的首行和首列冻结效果

CSS代码：

table.dataintable {

border-collapse: collapse;

font-family: Arial,Helvetica,sans-serif;

}

.tableContainer

{

width: 850px;

height: 150px;

border-left: 1px solid silver;

border-top: 1px solid silver;

overflow: auto;

}

table.table

{

table-layout: fixed;

width: 1050px;

}

table.table thead th

{

text-align: center;

font-family: Arial;

font-size: 13px;

color: white;

background-color: #3A6EA5;

padding: 3px;

}

table.table tbody td

{

text-align: center;

font-family: Arial;

font-size: 13px;

color: black;

background-color: white;

padding: 3px;

}

table.table th, table.table td

{

border-right: 1px solid silver;

border-bottom: 1px solid silver;

}

table.table thead th

{

top: expression(this.parentNode.parentNode.parentNode.parentNode.scrollTop);

position: relative;

z-index: 1;

}

table.table thead th.fixed

{

left: expression(this.parentNode.parentNode.parentNode.parentNode.scrollLeft);

z-index: 2;

}

table.table tbody td.fixed

{

left: expression(this.parentNode.parentNode.parentNode.parentNode.scrollLeft);

position: relative;

z-index: 0;

}

HTML代码：

序号姓名性别出生日期证件号码

2张三2男1982-05-031321112223334445553张三3男1983-05-031331112223334445554张三4男1984-05-031341112223334445555张三5男1985-05-031351112223334445556张三6男1986-05-031361112223334445557张三7男1987-05-031371112223334445558张三8男1988-05-031381112223334445559张三9男1989-05-03139111222333444555

效果图：

序号

姓名

性别

出生日期

证件号码

年级

班级

张三2

男

1982-05-03

13411122233344

张三3

男

1983-05-03

13411122233344

张三4

男

1984-05-03

13411122233344

张三5

男

1985-05-03

13411122233344

张三6

男

1986-05-03

13411122233344

张三7

男

1987-05-03

13411122233344

张三8

男

1988-05-03

13411122233344

张三9

男

1989-05-03

13411122233344

html table冻结首行,Html Table的首行和首列冻结效果相关推荐

el table 固定表头和首行_vue表格实现固定表头首列
前言最近在做vue移动端项目,需要做一个可以固定表头首列的表格,而且由于一些原因不能使用任何UI插件,网上找了很久也没什么好方法,所以在解决了问题之后,写下了这篇文章供后来人参考,文章有什么错漏的问 ...
换行样式不要首行缩进_CSS实现文章段落首行缩进两个字符不再每次空格
段落前面空两个字的距离,不要再使用空格了.应该使用首行缩进text-indent.text-indent可以使得容器内首行缩进一定单位.比如中文段落一般每段前空两个汉字. 代码如下: p{ text- ...
mySQL首行缩进快捷键_如何实现首行缩进效果
可以通过CSS中的text-indent属性来实现首行缩进效果我们在写页面的时候,尤其是碰到那些文本内容过多导致页面效果不好看时,这时我们可以通过首行缩进的方法来使文章内容更加有层次感.我们可以通过 ...
html首行缩进语言,css如何设置首行缩进2字符？
用CSS实现段落首缩进两个字符.应该使用首行缩进text-indent.text-indent可以使得容器内首行缩进一定单位. 在这里我们需要了解一种长度单位em.em是相对长度单位.相对于当前对象内 ...
php段落首行缩进2字符,利用wordpress首行缩进代码，搞定文章首行缩进2字符！
越来越多的小伙伴喜欢用wordpress来搭建个人网站,但是很多人对wordpress并不是很熟悉,所以在使用过程中经常遇到各种各样的问题,比如寻小山在2005年刚刚开始写博客的时候,使用的wordp ...
php文本首行缩进,html设置页面文本首行缩进
text-indent属性介绍属性值单位:em,1em 就代表缩进1个字,2em缩进2个字...... 注意:text-indent属性的值支持为负数. (相关教程推荐:html入门教程) 演示代码 ...
html首行字放大标签,CSS设置首字放大
CSS设置首字放大在很多的文章中,都有一个首字放大的效果,在CSS中同样可以实现该效果. CSS中通过对第一个字,进行单独的设置从而实现该效果. 首字放大中秋节是远古天象崇拜--敬月习俗的遗痕.据 ...
axure中怎么做出固定首行_办公软件操作技巧078：如何在excel表格中冻结行与列...
在日常工作中,有时我们编辑的excel表格会比较大,数据内容有很多行和列,当我们拖动滚动条找到了离表头比较远的数据行或列的内容时,又看不到行或列表头标题信息了,这时再去处理数据信息就会感觉很不方便,如 ...
06 - table表格标签+ 行合并+列合并
1.table 表格标签属性在小程序中查看 cellspacing="0" 表格边框合并: 表格:table 行:tr 列:td 属性: ...
android 关于 textview首行缩进显示图片、文字问题
先上效果图实现原理: 两个textview控件,推荐标签的为textview1,内容的为textview2. 1.textview1 布局盖在textview2 上.如RelativeLayout实 ...

html table冻结首行,Html Table的首行和首列冻结效果

html table冻结首行,Html Table的首行和首列冻结效果相关推荐

最新文章

热门文章