好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

css控制固定表头,兼容行列合并_html/css_WEB-ITnose

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

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

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

以下是相关的css

Html代码

body,table, td, a {font:9pt;} /*重点:固定行头样式*/ .scrollRowThead{position: relative; left: expression(this.parentElement.parentElement.parentElement.parentElement.scrollLeft);z-index:0;} /*重点:固定表头样式*/ .scrollColThead {position: relative;top: expression(this.parentElement.parentElement.parentElement.scrollTop);z-index:2;} /*行列交叉的地方*/ .scrollCR { z-index:3;} /*div外框*/ .scrollDiv {height:200px;clear: both; border: 1px solid #EEEEEE;OVERFLOW: scroll;width: 320px; } /*行头居中*/ .scrollColThead td,.scrollColThead th{ text-align: center ;} /*行头列头背景*/ .scrollRowThead,.scrollColThead td,.scrollColThead th{} /*表格的线*/ .scrolltable{border-bottom:1px solid #CCCCCC; border-right:1px solid #CCCCCC; } /*单元格的线等*/ .scrolltable td,.scrollTable th{border-left: 1px solid #CCCCCC; border-top: 1px solid #CCCCCC; padding: 5px; } .scrollTable thead th{font-weight:bold;position:relative;} -->



以下是HTML

Html代码

利用CSS代码让Table产生固定表头

列头 列头 列头 h1 h2 h3 h4 h5 a 单元格2 单元格3 单元格4 单元格5 单元格5 b 单元格2 单元格3 单元格4 单元格5 单元格5 c 单元格2 单元格3 单元格4 单元格5 单元格5 d 单元格2 单元格3 单元格4 单元格5 单元格5 e 单元格2 单元格3 单元格4 单元格5 单元格5 f 单元格2 单元格3 单元格4 单元格5 单元格5 g 单元格2 单元格3 单元格4 单元格5 单元格5

查看更多关于css控制固定表头,兼容行列合并_html/css_WEB-ITnose的详细内容...

  阅读:44次