The css position: sticky; is used here (this style has poor support for IE browser)
1. The header of the first row is fixed and does not scroll with the scroll bar.
html form:
<!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 style="width:50px">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>
<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 code:
<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>
The effect of Google is as follows: the first row is scrollable in the horizontal direction, and fixed in the vertical direction.
2. The first row and first column of the table are fixed.
The html of the table
<!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>
<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>
The effect is as follows:
the effect is better on Google. But it is not compatible with IE. If you want to be compatible with IE, you can use the old method to nest pseudo headers.