转自http://liyinlei.iteye.com/blog/2077714
这种固定行列的方式只适用于IE,并且只适用于数据量较少的情况.数据量很多时是非常耗资源的
<html xmlns="http://www.w3.org/1999/xhtml">
<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: 1000px; height: 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>