css固定表头,table表头之前在做一个项目的时候，需要用到表格显示一个月中每天的相关信息记录（一天的信息记录显示为一行）。于是有了这样一个问题，一次性将数据全部显示出来，页面就会出现滚动条，这样的话就不能同时看到表头信息和表格底部的数据记录，把每个月的信息记录都分为两页显示的话，又麻烦（切换月份后还要在进行分页操作）。把情况跟领导描述了下，表示不知道怎么做好了，领导略微想了下说，“把表头固定不就行了”。
好吧，固定表头，我只在Excel中操作过，在页面上要把table表头固定，对于我这样的菜鸟来说，简直就是“蜀道难，难于上青天”啊。幸亏有“万能”的度娘啊，还真给我百度到了几个例子，由于但是急于完成那个效果，没有记下我采用的那篇博文的地址和博主。这段时间没什么事儿，回头把项目中固定table表头的实现代码重新整理了下，记录下来方便以后回顾。
当时从百度出来的范例中选了各种实现方法来尝试，感觉这两个种方法比较容易理解，实现的思想也差不多，只是代码的组织上不同而已，今天就把这两种实现方法都贴出来对比一下。
实现方法一：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> 固定表格表头 </title> <meta http-equiv="X-UA-Compatible" content="IE=7" /> <meta name="Generator" content="EditPlus"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <style type="text/css"> div{ overflow-y: scroll; overflow-x: hidden; height: 100px; margin-top: 5px; margin-left: 12px; padding-top: -2px; padding-bottom: 5px; border: 3px solid #009933; } table{ width: 100%; border-color: #d2f1ac; border-collapse: collapse; border-top: 0px solid #ffffff; } .fixedtd{ position: relative; z-index: 1; background: #009933; text-align: center; } </style> </head> <body> <div> <table border="1"> <tr> <td class="fixedtd"> 固定表头第一列 </td> <td class="fixedtd"> 固定表头第二列 </td> <td class="fixedtd"> 固定表头第三列 </td> <td class="fixedtd"> 固定表头第四列 </td> <td class="fixedtd"> 固定表头第五列 </td> <td class="fixedtd"> 固定表头第六列 </td> </tr> <tr> <td>A1</td> <td>A2</td> <td>A3</td> <td>A4</td> <td>A5</td> <td>A6</td> </tr> <tr> <td>B1</td> <td>B2</td> <td>B3</td> <td>B4</td> <td>B5</td> <td>B6</td> </tr> <tr> <td>C1</td> <td>C2</td> <td>C3</td> <td>C4</td> <td>C5</td> <td>C6</td> </tr> <tr> <td>D1</td> <td>D2</td> <td>D3</td> <td>D4</td> <td>D5</td> <td>D6</td> </tr> <tr> <td>E1</td> <td>E2</td> <td>E3</td> <td>E4</td> <td>E5</td> <td>E6</td> </tr> <tr> <td>F1</td> <td>F2</td> <td>F3</td> <td>F4</td> <td>F5</td> <td>F6</td> </tr> <tr> <td>G1</td> <td>G2</td> <td>G3</td> <td>G4</td> <td>G5</td> <td>G6</td> </tr> <tr> <td>H1</td> <td>H2</td> <td>H3</td> <td>H4</td> <td>H5</td> <td>H6</td> </tr> </table> </div> </body> </html>
运行效果如下图所示：
该实现方法的一个不足之处在于：表头行与下面可滚动的行的宽度相同，div的滚动条显示在表头行的下方，覆盖了可滚动的行中最后一列的部分宽度，如果将div的横向滚动条也显示出来的话，那么不管怎样设置table和div的宽度，都不能使横向的滚动条消失（如果表格数据行的高度和小于div的高度值时，纵向的滚动条会消失）。
实现方法二：
<html> <head> <title>CSS控制表格表头固定</title> <style type="text/css"> div.tableContainer { clear: both; border-collapse: collapse; border: 2px solid #009933; height: expression(document.body.clientHeight*0.3); overflow: auto; width: 1024px; } div.tableContainer table { float: left; width: 100%; border-collapse: collapse; empty-cells: hide; } thead.fixedHeader tr { position: relative; top: expression(document.getElementById("tableContainer").scrollTop); } thead.fixedHeader th { background: #009933; border-left: 1px solid #d2f1ac; border-right: 1px solid #d2f1ac; border-top: 1px solid #d2f1ac; border-bottom: 1px solid #d2f1ac; font-weight: normal; padding: 4px 3px; text-align: center; } tbody.scrollContent td, tbody.scrollContent tr td { border-bottom: 1px solid #d2f1ac; border-left: 1px solid #d2f1ac; border-right: 1px solid #d2f1ac; border-top: 1px solid #d2f1ac; padding: 2px 3px; } </style> </head> <body> <div id="tableContainer" class="tableContainer"> <table> <thead class="fixedHeader"> <tr> <th colspan="5">测试效果</th> </tr> <tr> <th>表头第一列</th> <th>表头第二列</th> <th>表头第三列</th> <th>表头第四列</th> <th>表头第五列</th> </tr> </thead> <tbody class="scrollContent"> <tr> <td>第一行第一列</td> <td>第一行第二列</td> <td>第一行第三列</td> <td>第一行第四列</td> <td>第一行第五列</td> </tr> <tr> <td>第二行第一列</td> <td>第二行第二列</td> <td>第二行第三列</td> <td>第二行第四列</td> <td>第二行第五列</td> </tr> <tr> <td>第三行第一列</td> <td>第三行第二列</td> <td>第三行第三列</td> <td>第三行第四列</td> <td>第三行第五列</td> </tr> <tr> <td>第四行第一列</td> <td>第四行第二列</td> <td>第四行第三列</td> <td>第四行第四列</td> <td>第四行第五列</td> </tr> <tr> <td>第五行第一列</td> <td>第五行第二列</td> <td>第五行第三列</td> <td>第五行第四列</td> <td>第五行第五列</td> </tr> <tr> <td>第六行第一列</td> <td>第六行第二列</td> <td>第六行第三列</td> <td>第六行第四列</td> <td>第六行第五列</td> </tr> <tr> <td>第七行第一列</td> <td>第七行第二列</td> <td>第七行第三列</td> <td>第七行第四列</td> <td>第七行第五列</td> </tr> <tr> <td>第八行第一列</td> <td>第八行第二列</td> <td>第八行第三列</td> <td>第八行第四列</td> <td>第八行第五列</td> </tr> </tbody> </table> </div> </body> </html>
运行效果如下图所示：
css固定表头,table表头
|
