纯css实现表格的表头和⾸列固定（不兼容IE）这⾥⽤到css的position: sticky;（该样式对IE浏览器的⽀持较差）
⼀、⾸⾏的表头固定，不随滚动条⽽滚动。
html表格：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格固定表头</title>
</head>
<body>
<div>
<table cellspacing="0"border="0"cellpadding="0">
<thead>
<tr>
<th >Title1</th>
<th>Title</th>
<th>Title</th>
<th>Title</th>
<th>Title</th>
<th>Title</th>
<th>Title</th>
<th>Title</th>
</tr>
</thead>
<tbody>
<tr>
<td>text</td><td>text</td><td>text</td><td>text</td>
<td>text</td><td>text</td><td>text</td><td>text</td>
</tr>
<tr>
<td>text</td><td>text</td><td>text</td><td>text</td>
<td>text</td><td>text</td><td>text</td><td>text</td>
</tr>
<tr>
<td>text</td><td>text</td><td>text</td><td>text</td>
<td>text</td><td>text</td><td>text</td><td>text</td>
</tr>
<tr>
<td>text</td><td>text</td><td>text</td><td>text</td>
<td>text</td><td>text</td><td>text</td><td>text</td>
</tr>
<tr>
<td>text</td><td>text</td><td>text</td><td>text</td>
<td>text</td><td>text</td><td>text</td><td>text</td>
</tr>
<tr>
<td>text</td><td>text</td><td>text</td><td>text</td>
<td>text</td><td>text</td><td>text</td><td>text</td>
</tr>
<tr>
<td>text</td><td>text</td><td>text</td><td>text</td>
<td>text</td><td>text</td><td>text</td><td>text</td>
</tr>
<tr>
<td>text</td><td>text</td><td>text</td><td>text</td>
<td>text</td><td>text</td><td>text</td><td>text</td>
</tr>
<tr>
<td>text</td><td>text</td><td>text</td><td>text</td>
<td>text</td><td>text</td><td>text</td><td>text</td>
</tr>
</tr>
<tr>
<td>text</td><td>text</td><td>text</td><td>text</td>
<td>text</td><td>text</td><td>text</td><td>text</td>
</tr>
<tr>
<td>text</td><td>text</td><td>text</td><td>text</td>
<td>text</td><td>text</td><td>text</td><td>text</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
css代码：
<style>
div{
overflow:auto;
width:400px;
height:250px;/* 固定⾼度 */
border:1px solid gray;
border-bottom: 0;
border-right: 0;
}
table{
border-collapse:separate;
table-layout: fixed;
width: 100%;/* 固定寬度 */
word-break:break-all;/*内容⾃动换⾏*/
}
th{
position:sticky;/* ⾸⾏固定 */
z-index:1;
top:0;
background-color:lightblue;
}
td, th{
border-right:1px solid gray;
border-bottom:1px solid gray;
width:100px;
height:30px;
box-sizing: border-box;
text-align:center;
}
</style>
Google效果如下：⾸⾏在⽔平⽅向可滚动，垂直⽅向上固定
⼆、表格⾸⾏⾸列固定
表格的html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>⾸⾏⾸列固定</title>
</head>
<body>
<div>
<table cellspacing="0"border="0"cellpadding="0">
<thead>
<tr>
<th>Title</th><th>Title</th><th>Title</th> <th>Title</th><th>Title</th><th>Title</th> <th>Title</th><th>Title</th><th>Title</th> </tr>
</thead>
<tbody>
<tr>
<th>Title</th><td>text</td><td>text</td> <td>text</td><td>text</td><td>text</td> <td>text</td><td>text</td><td>text</td> </tr>
<tr>
<th>Title</th><td>text</td><td>text</td> <td>text</td><td>text</td><td>text</td> <td>text</td><td>text</td><td>text</td> </tr>
<tr>
<th>Title</th><td>text</td><td>text</td> <td>text</td><td>text</td><td>text</td> <td>text</td><td>text</td><td>text</td> </tr>
<tr>
<th>Title</th><td>text</td><td>text</td> <td>text</td><td>text</td><td>text</td> <td>text</td><td>text</td><td>text</td> </tr>
<tr>
<th>Title</th><td>text</td><td>text</td> <td>text</td><td>text</td><td>text</td> <td>text</td><td>text</td><td>text</td> </tr>
<tr>
<th>Title</th><td>text</td><td>text</td> <td>text</td><td>text</td><td>text</td> <td>text</td><td>text</td><td>text</td> </tr>
css设置表格滚动条<tr>
<th>Title</th><td>text</td><td>text</td> <td>text</td><td>text</td><td>text</td> <td>text</td><td>text</td><td>text</td> </tr>
<tr>
<th>Title</th><td>text</td><td>text</td> <td>text</td><td>text</td><td>text</td> <td>text</td><td>text</td><td>text</td> </tr>
<tr>
<th>Title</th><td>text</td><td>text</td> <td>text</td><td>text</td><td>text</td> <td>text</td><td>text</td><td>text</td> </tr>
<tr>
<th>Title</th><td>text</td><td>text</td> <td>text</td><td>text</td><td>text</td> <td>text</td><td>text</td><td>text</td> </tr>
<tr>
<th>Title</th><td>text</td><td>text</td> <td>text</td><td>text</td><td>text</td> <td>text</td><td>text</td><td>text</td> </tr>
<tr>
<th>Title</th><td>text</td><td>text</td>
<td>text</td><td>text</td><td>text</td>
<td>text</td><td>text</td><td>text</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
css:
<style>
/*外层div，设置宽⾼度*/
div{
overflow:auto;
width:400px;
height:250px;
border:1px solid gray;
border-bottom: 0;
border-right: 0;
}
table{
border-collapse:separate;/*设置边框会被分开，⽽不是合并*/
table-layout: fixed;/*列宽由表格宽度和列宽度设定。*/
width: 100%;
word-break:break-all;/*内容⾃动换⾏*/
}
th{
background-color:lightblue;
}
td, th{
border-right:1px solid gray;
border-bottom:1px solid gray;
width:100px;
height:30px;
box-sizing: border-box;
text-align:center;
}
th:first-child{
position:sticky;
left:0;/* ⾸列最左 */
z-index:1;
}
thead tr th{
position:sticky;
top:0;/* ⾸⾏最上 */
}
/*左上⾓第⼀个单元格，显⽰优先级要最⾼*/
thead th:first-child{
z-index:2;
background-color:lightblue;
}
</style>
效果如下：
在Google上效果较好。但在IE上不兼容，如果要兼容IE，可以采⽤⽼⽅法，嵌套伪表头。

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