固定table表头-CSDN博客

div.tableContainer {
clear: both;
border: 1px solid #963;
height: expression(document.body.clientHeight*0.3);
overflow: auto;
width: 100%;
}

div.tableContainer table {
float: left;
width: 100%
}

thead.fixedHeader tr {
position: relative;

top: expression(document.getElementById("tableContainer").scrollTop)
}

thead.fixedHeader th {
background: #C96;
border-left: 1px solid #EB8;
border-right: 1px solid #B74;
border-top: 1px solid #EB8;
font-weight: normal;
padding: 4px 3px;
text-align: center
}

tbody.scrollContent td, tbody.scrollContent tr.normalRow td {
background: #FFF;
border-bottom: 1px solid #EEE;
border-left: 1px solid #EEE;
border-right: 1px solid #AAA;
border-top: 1px solid #AAA;
padding: 2px 3px
}

</style>
</head>
<body>
<div id="tableContainer" class="tableContainer">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<thead class="fixedHeader">
<tr>
<th>表头 1</th>
<th>表头 2</th>
<th>表头 3</th>
<th>表头 4</th>
<th>表头 5</th>
<th>表头 6</th>
<th>表头 7</th>
</tr>
</thead>
<tbody class="scrollContent">
<tr>
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
<td>Cell Content 4</td>
<td>Cell Content 5</td>
<td>Cell Content 6</td>
<td>Cell Content 7</td>
</tr>
<tr>
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
<td>More Cell Content 4</td>
<td>More Cell Content 5</td>
<td>More Cell Content 6</td>
<td>More Cell Content 7</td>
</tr>
<tr>
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
<td>Even More Cell Content 4</td>
<td>Even More Cell Content 5</td>
<td>Even More Cell Content 6</td>
<td>Even More Cell Content 7</td>
</tr>
<tr>
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>And Repeat 3</td>
<td>And Repeat 4</td>
<td>And Repeat 5</td>
<td>And Repeat 6</td>
<td>And Repeat 7</td>
</tr>
<tr>
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>ven More Cell Content 3</td>
<td>Even More Cell Content 4</td>
<td>Even More Cell Content 5</td>
<td>Even More Cell Content 6</td>
<td>Even More Cell Content 7</td>
</tr>
<tr>
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>And Repeat 3</td>
<td>And Repeat 4</td>
<td>And Repeat 5</td>
<td>And Repeat 6</td>
<td>And Repeat 7</td>
</tr>
<tr>
<td nowrap>Even More Cell Content 1</td>
<td nowrap>Even More Cell Content 2</td>
<td nowrap>Even More Cell Content 3</td>
<td nowrap>Even More Cell Content 4</td>
<td nowrap>Even More Cell Content 5</td>
<td nowrap>Even More Cell Content 6</td>
<td nowrap>Even More Cell Content 7</td>
</tr>
<tr>
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>And Repeat 3</td>
<td>And Repeat 4</td>
<td>And Repeat 5</td>
<td>And Repeat 6</td>
<td>And Repeat 7</td>
</tr>
</tbody>
</table>
</div>
</body>

</html>