固定table表头

来源：互联网发布：新浪博客seo 编辑：程序博客网时间：2024/05/21 06:22

固定表头两种方式:

1. 表头和表内容分别在两个table中, 互不干扰.

优点: 实现简单

缺点: 两个table 的列宽不好保持一致, 缺乏灵活性

2. 用标签的属性来处理

<html><head><style type="text/css"> /*重点：固定行头样式*/.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;} /*表格的线*/.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; }</style></head><body><div style="height:200px; width:200px; border: 1px solid  blue;  overflow-y:auto;  "> <table border="0" cellpadding="3" cellspacing="0" class="scrolltable"><tr class="scrollColThead" style="background-color:green;"><th class="scrollRowThead scrollCR">lie1</th><th>lie1</th></tr><tr><td class="scrollRowThead">content</td><td>content</td></tr><tr><td>content</td><td>content</td></tr><tr><td>content</td><td>content</td></tr><tr><td>content</td><td>content</td></tr><tr><td>content</td><td>content</td></tr><tr><td>content</td><td>content</td></tr><tr><td>content</td><td>content</td></tr><tr><td>content</td><td>content</td></tr><tr><td>content</td><td>content</td></tr><tr><td>content</td><td>content</td></tr></table></div></body></html>