1、第一种方法
通过属性overflow属性控制滚动,主要是写一个div设置固定高度,内容超出高度出现滚动条,overlay主要控制滚动条不占位置。注意:此写法,浏览器兼容好。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
th {
border: 1px solid #eee;
color: #333;
font-size: 16px;
line-height: 36px;
background: #e5e5e5;
}
table {
border-collapse: collapse;
width: 100%;
}
td {
border: 1px solid #eee;
font-size: 14px;
line-height: 32px;
height: 32px;
}
.table-head {
color: red;
height: 36px;
}
.table-body {
width: 100%;
max-height: 200px;
overflow: overlay;
}
.table-head table,
.table-body table {
width: 100%;
}
</style>
</head>
<body>
<div style="padding: 20px;">
<div class="table-head">
<table>
<thead>
<th >测试111</th>
<th >测试111</th>
<th >测试111</th
</thead>
</table>
</div>
<div class="table-body">
<table>
<tbody id="tbody">
<tr>
<td>111</td>
<td>111</td>
<td>111</td>
</tr>
<tr>
<td>222</td>
<td>222</td>
<td>222</td>
</tr>
<tr>
<td>333</td>
<td>333</td>
<td>333</td>
</tr>
<tr>
<td>444</td>
<td>444</td>
<td>444</td>
</tr>
<tr>
<td>555</td>
<td>555</td>
<td>555</td>
</tr>
<tr>
<td>555</td>
<td>555</td>
<td>555</td>
</tr>
<tr>
<td>555</td>
<td>555</td>
<td>555</td>
</tr>
<tr>
<td>555</td>
<td>555</td>
<td>555</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
2、第二种方法
通过 position: sticky属性控制滚动,当页面滚动超出目标区域时,它的表现就像 position:fixed;,它会固定在目标位置。注意:低版本的浏览器不兼容此写法。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
th {
border: 1px solid #eee;
color: #333;
font-size: 16px;
line-height: 36px;
background: #e5e5e5;
}
table {
border-collapse: collapse;
width: 100%;
}
td {
border: 1px solid #eee;
font-size: 14px;
line-height: 32px;
height: 32px;
}
.float-title{
position: sticky;
top: 0px;
}
</style>
</head>
<body>
<div style="padding: 20px;">
<table>
<thead class="float-title">
<th>测试111</th>
<th>测试111</th>
<th>测试111</th
</thead>
<tbody id="tbody">
<tr>
<td>111</td>
<td>111</td>
<td>111</td>
</tr>
<tr>
<td>222</td>
<td>222</td>
<td>222</td>
</tr>
<tr>
<td>333</td>
<td>333</td>
<td>333</td>
</tr>
<tr>
<td>444</td>
<td>444</td>
<td>444</td>
</tr>
<tr>
<td>555</td>
<td>555</td>
<td>555</td>
</tr>
<tr>
<td>555</td>
<td>555</td>
<td>555</td>
</tr>
<tr>
<td>555</td>
<td>555</td>
<td>555</td>
</tr>
<tr>
<td>555</td>
<td>555</td>
<td>555</td>
</tr>
<tr>
<td>555</td>
<td>555</td>
<td>555</td>
</tr>
<tr>
<td>555</td>
<td>555</td>
<td>555</td>
</tr>
<tr>
<td>555</td>
<td>555</td>
<td>555</td>
</tr>
<tr>
<td>555</td>
<td>555</td>
<td>555</td>
</tr>
<tr>
<td>555</td>
<td>555</td>
<td>555</td>
</tr>
<tr>
<td>555</td>
<td>555</td>
<td>555</td>
</tr>
<tr>
<td>555</td>
<td>555</td>
<td>555</td>
</tr>
<tr>
<td>555</td>
<td>555</td>
<td>555</td>
</tr>
<tr>
<td>555</td>
<td>555</td>
<td>555</td>
</tr>
<tr>
<td>555</td>
<td>555</td>
<td>555</td>
</tr>
<tr>
<td>555</td>
<td>555</td>
<td>555</td>
</tr>
<tr>
<td>555</td>
<td>555</td>
<td>555</td>
</tr>
<tr>
<td>555</td>
<td>555</td>
<td>555</td>
</tr>
<tr>
<td>555</td>
<td>555</td>
<td>555</td>
</tr>
<tr>
<td>555</td>
<td>555</td>
<td>555</td>
</tr>
<tr>
<td>555</td>
<td>555</td>
<td>555</td>
</tr>
<tr>
<td>555</td>
<td>555</td>
<td>555</td>
</tr>
<tr>
<td>555</td>
<td>555</td>
<td>555</td>
</tr>
<tr>
<td>555</td>
<td>555</td>
<td>555</td>
</tr>
<tr>
<td>555</td>
<td>555</td>
<td>555</td>
</tr>
<tr>
<td>555</td>
<td>555</td>
<td>555</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>