HtmlTable表头固定实现效果：
上代码：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>ξӗθCSSԌ</title>
<style>
table tbody {
display:block;
height:195px;
overflow-y:scroll;
}
table thead, tbody tr {
display:table;
width:100%;
table-layout:fixed;
}
table thead {
width: calc( 100% - 1em )
}
table thead th{ background:#ccc;}
</style>
</head>
<body>
<table width="80%" border="1">
<thead>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
</tr>
</thead>
<tbody>
<tr>
<td>111</td>
<td>222</td>
<td>333</td>
<td>444</td>
<td>555</td>
</tr>
<tr>
<td>111</td>
<td>222</td>
<td>222</td>    <td>333</td>    <td>444</td>    <td>555</td>  </tr>
<tr>
<td>111</td>    <td>222</td>    <td>333</td>    <td>444</td>    <td>555</td>  </tr>
<tr>
<td>111</td>    <td>222</td>    <td>333</td>    <td>444</td>    <td>555</td>  </tr>
<tr>
<td>111</td>    <td>222</td>    <td>333</td>    <td>444</td>    <td>555</td>  </tr>
<tr>
<td>111</td>    <td>222</td>    <td>333</td>    <td>444</td>    <td>555</td>  </tr><tr>
<td>111</td>    <td>222</td>    <td>333</td>    <td>444</td>    <td>555</td>  </tr>
<tr>
<td>111</td>    <td>222</td>    <td>333</td>    <td>444</td>    <td>555</td>  </tr>
<tr>
<td>111</td>    <td>222</td>    <td>333</td>    <td>444</td>    <td>555</td>  </tr>
<tr>
<td>111</td>    <td>222</td>    <td>333</td>    <td>444</td>    <td>555</td>  </tr><tr>
<td>111</td>    <td>222</td>    <td>333</td>    <td>444</td>    <td>555</td>  </tr>
</tr>
<tr>
<td>111</td>    <td>222</td>    <td>333</td>    <td>444</td>    <td>555</td>  </tr>
<tr>
<td>111</td>    <td>222</td>    <td>333</td>    <td>444</td>    <td>555</td>  </tr>
<tr>
<td>111</td>    <td>222</td>    <td>333</td>    <td>444</td>    <td>555</td>  </tr>
</tbody>
</table>
html网页设计 table </body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。