多浏览器没有做太多测试,在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的详细内容...