首页 > 代码库 > css控制固定表头，兼容行列合并

css控制固定表头，兼容行列合并

2024-08-09 20:54:42   218人阅读

项目中设计的报表table设计的列数相对过多，当拖动下方的滚动条时无法对应表头所对应的列，因此在网上搜索了好一段日子，最后在网上找到了一些参考资料，然后总结归纳出兼容行列合并的固定表头demo。 

多浏览器没有做太多测试，在ie6中已测试通过。 

功能期待了很久今天终于找到解决的方式，总结到javaeye中方便日后查阅。实现方式可能还有更好的，希望有大牛路过，给我留点更好的实现例子作日后交流之用。 

以下是相关的css 

Html代码  技术分享
  1. <style type="text/css">   
  2. <!--   
  3. body,table, td, a {font:9pt;}   
  4. /*重点：固定行头样式*/  
  5. .scrollRowThead{position: relative; left: expression(this.parentElement.parentElement.parentElement.parentElement.scrollLeft);z-index:0;}  
  6. /*重点：固定表头样式*/  
  7. .scrollColThead {position: relative;top: expression(this.parentElement.parentElement.parentElement.scrollTop);z-index:2;}  
  8. /*行列交叉的地方*/  
  9. .scrollCR { z-index:3;}  
  10. /*div外框*/  
  11. .scrollDiv {height:200px;clear: both; border: 1px solid #EEEEEE;OVERFLOW: scroll;width: 320px; }  
  12. /*行头居中*/  
  13. .scrollColThead td,.scrollColThead th{ text-align: center ;}  
  14. /*行头列头背景*/  
  15. .scrollRowThead,.scrollColThead td,.scrollColThead th{}  
  16. /*表格的线*/  
  17. .scrolltable{border-bottom:1px solid #CCCCCC; border-right:1px solid #CCCCCC; }  
  18. /*单元格的线等*/  
  19. .scrolltable td,.scrollTable th{border-left: 1px solid #CCCCCC; border-top: 1px solid #CCCCCC; padding: 5px; }  
  20.   
  21. .scrollTable thead th{font-weight:bold;position:relative;}  
  22. -->   
  23. </style>  



以下是HTML 

Html代码  技术分享
  1. <h1>利用CSS代码让Table产生固定表头</h1>  
  2. <div id="scrollDiv" class="scrollDiv" >  
  3. <table border="0" cellpadding="3" cellspacing="0" width="500" class="scrollTable">  
  4.     <thead>  
  5. <tr class="scrollColThead"  >  
  6.   <th class="scrollRowThead scrollCR"  >&nbsp;</th>  
  7.   <th colspan="2">列头</th>  
  8.   <th colspan="2">列头</th>  
  9.   <th rowspan="2">列头</th>  
  10. </tr>  
  11. <tr class="scrollColThead"  >  
  12.   <th class="scrollRowThead scrollCR"  >h1</th>  
  13.   <th >h2</th>  
  14.   <th >h3</th>  
  15.   <th >h4</th>  
  16.   <th >h5</th>  
  17. </tr>  
  18. </thead>  
  19. <tr>  
  20.   <td class="scrollRowThead"  >  
  21.     <input type="checkbox" name="checkbox" value=http://www.mamicode.com/"checkbox">  
  22.     a</td>  
  23.   <td>单元格2</td>  
  24.   <td>单元格3</td>  
  25.   <td>单元格4</td>  
  26.   <td>单元格5</td>  
  27.   <td>单元格5</td>  
  28. </tr>  
  29. <tr>  
  30.   <td class="scrollRowThead"  >  
  31.     <input type="checkbox" name="checkbox2" value=http://www.mamicode.com/"checkbox">  
  32.     b</td>  
  33.   <td>单元格2</td>  
  34.   <td>单元格3</td>  
  35.   <td>单元格4</td>  
  36.   <td>单元格5</td>  
  37.   <td>单元格5</td>  
  38. </tr>  
  39. <tr>  
  40.   <td nowrap class="scrollRowThead"  >  
  41.     <input type="checkbox" name="checkbox3" value=http://www.mamicode.com/"checkbox">  
  42.     c</td>  
  43.   <td nowrap>单元格2</td>  
  44.   <td nowrap>单元格3</td>  
  45.   <td nowrap>单元格4</td>  
  46.   <td nowrap>单元格5</td>  
  47.   <td nowrap>单元格5</td>  
  48. </tr>  
  49. <tr>  
  50.   <td class="scrollRowThead"  >  
  51.     <input type="checkbox" name="checkbox4" value=http://www.mamicode.com/"checkbox">  
  52.     d</td>  
  53.   <td>单元格2</td>  
  54.   <td>单元格3</td>  
  55.   <td>单元格4</td>  
  56.   <td>单元格5</td>  
  57.   <td>单元格5</td>  
  58. </tr>  
  59. <tr>  
  60.   <td class="scrollRowThead"  >  
  61.     <input type="checkbox" name="checkbox5" value=http://www.mamicode.com/"checkbox">  
  62.     e</td>  
  63.   <td>单元格2</td>  
  64.   <td>单元格3</td>  
  65.   <td>单元格4</td>  
  66.   <td>单元格5</td>  
  67.   <td>单元格5</td>  
  68. </tr>  
  69. <tr>  
  70.   <td class="scrollRowThead"  >  
  71.     <input type="checkbox" name="checkbox6" value=http://www.mamicode.com/"checkbox">  
  72.     f</td>  
  73.   <td>单元格2</td>  
  74.   <td>单元格3</td>  
  75.   <td>单元格4</td>  
  76.   <td>单元格5</td>  
  77.   <td>单元格5</td>  
  78. </tr>  
  79. <tr>  
  80.   <td class="scrollRowThead" >  
  81.     <input type="checkbox" name="checkbox7" value=http://www.mamicode.com/"checkbox">  
  82.     g</td>  
  83.   <td>单元格2</td>  
  84.   <td>单元格3</td>  
  85.   <td>单元格4</td>  
  86.   <td>单元格5</td>  
  87.   <td>单元格5</td>  
  88. </tr>  
  89. </table>  
  90. </div>  



另外补充一点，如果在表头合并的是最后一行的时候，排版将出现问题。由于上面合并的只有两行，因此样式没有受到改变，如果要处理，暂时的解决办法就是不合并rowspan最后一行，将其多行显示，有点牵强，但找不到解决办法。类似情况如下图： 

技术分享 

找了些资料可作参考： 
http://www.loveayang.com.cn/post/2008/04/e59bbae5ae9ae8a1a8e5a4b4e79a84CSSe5ae9ee78eb0.aspx 
文章中亦说没有办法解决上述的这个问题，留待日后有更好的解决方案。

css控制固定表头，兼容行列合并


联系
我们