一次性将数据全部显示出来,页面就会出现滚动条,这样的话就不能同时看到表头信息和表格底部的数据记录,把表头固定可以解决此问题
之前在做一个项目的时候,需要用到表格显示一个月中每天的相关信息记录(一天的信息记录显示为一行)。于是有了这样一个问题,一次性将数据全部显示出来,页面就会出现滚动条,这样的话就不能同时看到表头信息和表格底部的数据记录,把每个月的信息记录都分为两页显示的话,又麻烦(切换月份后还要在进行分页操作)。把情况跟领导描述了下,表示不知道怎么做好了,领导略微想了下说,“把表头固定不就行了”。
好吧,固定表头,我只在Excel中操作过,在页面上要把table表头固定,对于我这样的菜鸟来说,简直就是“蜀道难,难于上青天”啊。幸亏有“万能”的度娘啊,还真给我百度到了几个例子,由于但是急于完成那个效果,没有记下我采用的那篇博文的地址和博主。这段时间没什么事儿,回头把项目中固定table表头的实现代码重新整理了下,记录下来方便以后回顾。
当时从百度出来的范例中选了各种实现方法来尝试,感觉这两个种方法比较容易理解,实现的思想也差不多,只是代码的组织上不同而已,今天就把这两种实现方法都贴出来对比一下。
实现方法一:
固定表格表头
运行效果如下图所示:
该实现方法的一个不足之处在于:表头行与下面可滚动的行的宽度相同,div的滚动条显示在表头行的下方,覆盖了可滚动的行中最后一列的部分宽度,如果将div的横向滚动条也显示出来的话,那么不管怎样设置table和div的宽度,都不能使横向的滚动条消失(如果表格数据行的高度和小于div的高度值时,纵向的滚动条会消失)。
实现方法二:
CSS控制表格表头固定
运行效果如下图所示:
好吧,固定表头,我只在Excel中操作过,在页面上要把table表头固定,对于我这样的菜鸟来说,简直就是“蜀道难,难于上青天”啊。幸亏有“万能”的度娘啊,还真给我百度到了几个例子,由于但是急于完成那个效果,没有记下我采用的那篇博文的地址和博主。这段时间没什么事儿,回头把项目中固定table表头的实现代码重新整理了下,记录下来方便以后回顾。
当时从百度出来的范例中选了各种实现方法来尝试,感觉这两个种方法比较容易理解,实现的思想也差不多,只是代码的组织上不同而已,今天就把这两种实现方法都贴出来对比一下。
实现方法一:
复制代码
代码如下: 固定表头第一列 | 固定表头第二列 | 固定表头第三列 | 固定表头第四列 | 固定表头第五列 | 固定表头第六列 |
A1 | A2 | A3 | A4 | A5 | A6 |
B1 | B2 | B3 | B4 | B5 | B6 |
C1 | C2 | C3 | C4 | C5 | C6 |
D1 | D2 | D3 | D4 | D5 | D6 |
E1 | E2 | E3 | E4 | E5 | E6 |
F1 | F2 | F3 | F4 | F5 | F6 |
G1 | G2 | G3 | G4 | G5 | G6 |
H1 | H2 | H3 | H4 | H5 | H6 |
运行效果如下图所示:
该实现方法的一个不足之处在于:表头行与下面可滚动的行的宽度相同,div的滚动条显示在表头行的下方,覆盖了可滚动的行中最后一列的部分宽度,如果将div的横向滚动条也显示出来的话,那么不管怎样设置table和div的宽度,都不能使横向的滚动条消失(如果表格数据行的高度和小于div的高度值时,纵向的滚动条会消失)。
实现方法二:
复制代码
代码如下:测试效果 | ||||
---|---|---|---|---|
表头第一列 | 表头第二列 | 表头第三列 | 表头第四列 | 表头第五列 |
第一行第一列 | 第一行第二列 | 第一行第三列 | 第一行第四列 | 第一行第五列 |
第二行第一列 | 第二行第二列 | 第二行第三列 | 第二行第四列 | 第二行第五列 |
第三行第一列 | 第三行第二列 | 第三行第三列 | 第三行第四列 | 第三行第五列 |
第四行第一列 | 第四行第二列 | 第四行第三列 | 第四行第四列 | 第四行第五列 |
第五行第一列 | 第五行第二列 | 第五行第三列 | 第五行第四列 | 第五行第五列 |
第六行第一列 | 第六行第二列 | 第六行第三列 | 第六行第四列 | 第六行第五列 |
第七行第一列 | 第七行第二列 | 第七行第三列 | 第七行第四列 | 第七行第五列 |
第八行第一列 | 第八行第二列 | 第八行第三列 | 第八行第四列 | 第八行第五列 |
运行效果如下图所示:
以上就是css固定table表头的实现代码可同时看到表头和表格底部的详细内容,更多请关注0133技术站其它相关文章!