<head>
<title>完美冻结列和行 </title>
<style type="text/css">
.FixedHeaderColumnsTableDiv
{
overflow: auto
position: relative
}
.FixedCell
{
position: relative
top: expression(this.offsetParent.scrollTop)
left: expression(this.parentElement.offsetParent.scrollLeft)
z-index: 1800
}
.FixedHeaderRow1
{
position: relative
top: expression(this.offsetParent.scrollTop)
background-color: #ccc
z-index: 300
}
.FixedHeaderRow2
{
position: relative
top: expression(this.offsetParent.scrollTop)
z-index: 290
background-color:#ffccff
}
.FixedDataColumn
{
position: relative
left: expression(this.parentElement.offsetParent.parentElement.scrollLeft)
z-index: 200
background-color: Aqua
}
</style>
</head>
<body>
<div class="FixedHeaderColumnsTableDiv" style="width: 1000pxheight: 100px">
<table border="0" cellpadding="0" cellspacing="0" width="1200px">
<tr class="FixedHeaderRow1">
<td class="FixedCell" style="width: 80px">
header1
</td>
<td class="FixedCell" style="width: 80px">
header2
</td>
<td class="FixedCell" style="width: 80px">
header3
</td>
<td class="FixedCell" style="width: 80px">
header4
</td>
<td style="width: 80px">
header5
</td>
<td style="width: 80px">
header6
</td>
<td style="width: 80px">
header7
</td>
<td style="width: 80px">
header8
</td>
<td style="width: 80px">
header9
</td>
<td style="width: 80px">
header10
</td>
</tr>
<tr class="FixedHeaderRow2">
<td class="FixedCell" style="width: 80px" align="center">
ss
</td>
<td class="FixedCell" style="width: 80px" align="center">
ss
</td>
<td class="FixedCell" style="width: 80px">
header16
</td>
<td class="FixedHeaderColumn1" colspan="7" align="center">
header17dddddddddddd
</td>
</tr>
<tr>
<td class="FixedDataColumn">
col1
</td>
<td class="FixedDataColumn">
col2
</td>
<td class="FixedDataColumn">
col3
</td>
<td class="FixedDataColumn">
col4
</td>
<td>
col5
</td>
<td>
col6
</td>
<td>
col7
</td>
<td>
col8
</td>
<td>
col9
</td>
<td>
col10
</td>
</tr>
<tr>
<td class="FixedDataColumn">
col1
</td>
<td class="FixedDataColumn">
col2
</td>
<td class="FixedDataColumn">
col3
</td>
<td class="FixedDataColumn">
col4
</td>
<td>
col5
</td>
<td>
col6
</td>
<td>
col7
</td>
<td>
col8
</td>
<td>
col9
</td>
<td>
col10
</td>
</tr>
<tr>
<td class="FixedDataColumn">
col1
</td>
<td class="FixedDataColumn">
col2
</td>
<td class="FixedDataColumn">
col3
</td>
<td class="FixedDataColumn">
col4
</td>
<td>
col5
</td>
<td>
col6
</td>
<td>
col7
</td>
<td>
col8
</td>
<td>
col9
</td>
<td>
col10
</td>
</tr>
<tr>
<td class="FixedDataColumn">
col1
</td>
<td class="FixedDataColumn">
col2
</td>
<td class="FixedDataColumn">
col3
</td>
<td class="FixedDataColumn">
col4
</td>
<td>
col5
</td>
<td>
col6
</td>
<td>
col7
</td>
<td>
col8
</td>
<td>
col9
</td>
<td>
col10
</td>
</tr>
<tr>
<td class="FixedDataColumn">
col1
</td>
<td class="FixedDataColumn">
col2
</td>
<td class="FixedDataColumn">
col3
</td>
<td class="FixedDataColumn">
col4
</td>
<td>
col5
</td>
<td>
col6
</td>
<td>
col7
</td>
<td>
col8
</td>
<td>
col9
</td>
<td>
col10
</td>
</tr>
<tr>
<td class="FixedDataColumn">
col1
</td>
<td class="FixedDataColumn">
col2
</td>
<td class="FixedDataColumn">
col3
</td>
<td class="FixedDataColumn">
col4
</td>
<td>
col5
</td>
<td>
col6
</td>
<td>
col7
</td>
<td>
col8
</td>
<td>
col9
</td>
<td>
col10
</td>
</tr>
<tr>
<td class="FixedDataColumn">
col1
</td>
<td class="FixedDataColumn">
col2
</td>
<td class="FixedDataColumn">
col3
</td>
<td class="FixedDataColumn">
col4
</td>
<td>
col5
</td>
<td>
col6
</td>
<td>
col7
</td>
<td>
col8
</td>
<td>
col9
</td>
<td>
col10
</td>
</tr>
</table>
</div>
</body>
</html>
以上是代码冻结的发放案例。
firefox 和 ie 的区别很大,有些对dom的操作方法不太一样.但是如果firefox调好,一般ie没有什么问题的,还有firefox有一定的融错能力,所以有时firefox下正常,ie下也会有错误,建议用alert语句缩小范围测试html行固定：顶部填写：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">
style中设定滚轴及固定点：
<style type="text/css">
.fixed {position: relative}
.scroll_layer
{
height: 500px
overflow-y: scroll
}
</style>
将table嵌套在scroll_layer中：
<div class="scroll_layer" align="center">
<table style='table-layout:fixed'>
<thead >
<tr >
<td class=fixed >固定区域</td>
</tr>
</thead>
<tbody>
......非固定区域
</tbody>
</table>
</div>
</body>
</html>
