前端使用CSS固定表头
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
}
.tableFixedTop {
padding: 20px;
}
.tableFixedTop table {
border: 1px solid #ddd;
border-collapse: collapse;
width: 100%;
}
.tableFixedTop table tr, .tableFixedTop table th, .tableFixedTop table td {
border: 1px solid #ddd;
}
.tableFixedTop .tableHeader {
position: sticky;
top: 0;
}
.tableFixedTop .tableHeader th {
background: cornflowerblue;
color: #fff;
font-weight: normal;
padding: 5px 0 5px 10px;
font-size: 12px;
text-align: left;
}
.tableFixedTop .tableBody {
margin-top: -1px;
}
.tableFixedTop .tableBody .textEllipsisA {
width: 180px;
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.tableFixedTop .tableBody td {
color: #333;
font-weight: normal;
padding: 5px 0 5px 10px;
font-size: 12px;
text-align: left;
}
.tableScroll {
padding: 20px;
}
.tableScroll table {
border: 1px solid #ddd;
border-collapse: collapse;
width: 100%;
}
.tableScroll table tr, .tableScroll table th, .tableScroll table td {
border: 1px solid #ddd;
}
.tableScroll .tableHeader {
position: sticky;
top: 0;
}
.tableScroll .tableHeader th {
background: cornflowerblue;
color: #fff;
font-weight: normal;
padding: 5px 0 5px 10px;
font-size: 12px;
text-align: left;
}
.tableScroll .scrollBox {
overflow-y: auto;
max-height: 200px;
}
.tableScroll .tableBody {
margin-top: -1px;
}
.tableScroll .tableBody .textEllipsis {
max-width: 175px;
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.tableScroll .tableBody td {
color: #333;
font-weight: normal;
padding: 5px 0 5px 10px;
font-size: 12px;
text-align: left;
}
</style>
</head>
<body>
<h2 style="text-align: center;">局部滑动</h2>
<div class="tableScroll">
<table class="tableHeader">
<colgroup>
<col width="100">
<col width="200">
<col width="200">
<col width="200">
<col>
</colgroup>
<tr>
<th>ID</th>
<th>表头1</th>
<th>表头2</th>
<th>表头3</th>
<th>其他</th>
</tr>
</table>
<div class="scrollBox" style="max-height:400px;">
<table class="tableBody">
<colgroup>
<col width="100">
<col width="200">
<col width="200">
<col width="200">
<col>
</colgroup>
<tr>
<td>1</td>
<td>
<div class="textEllipsis">表格信息表格信息表格信息表格信息表格信息表格信息表格信息表格信息表格信息表格信息表格信息表格信息</div>
</td>
<td>
<div class="textEllipsis">表格信息表格信息表格信息表格信息表格信息表格信息表格信息表格信息</div>
</td>
<td>
<div class="textEllipsis">表格信息表格信息表格信息表格信息表格信息表格信息表格信息表格信息表格信息</div>
</td>
<td></td>
</tr>
<tr>
<td>1</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td></td>
</tr>
<tr>
<td>1</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td></td>
</tr>
<tr>
<td>1</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td></td>
</tr>
<tr>
<td>1</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td></td>
</tr>
<tr>
<td>1</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td></td>
</tr>
<tr>
<td>1</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td></td>
</tr>
<tr>
<td>1</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td></td>
</tr>
<tr>
<td>1</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td></td>
</tr>
<tr>
<td>1</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td></td>
</tr>
<tr>
<td>1</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td></td>
</tr>
<tr>
<td>1</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td></td>
</tr>
<tr>
<td>1</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td></td>
</tr>
<tr>
<td>1</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td></td>
</tr>
<tr>
<td>1</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td></td>
</tr>
<tr>
<td>1</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td></td>
</tr>
<tr>
<td>1</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td></td>
</tr>
<tr>
<td>1</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td></td>
</tr>
<tr>
<td>1</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td></td>
</tr>
<tr>
<td>1</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td></td>
</tr>
<tr>
<td>1</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td></td>
</tr>
<tr>
<td>1</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td></td>
</tr>
<tr>
<td>1</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td></td>
</tr>
<tr>
<td>1</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td></td>
</tr>
<tr>
<td>1</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td></td>
</tr>
<tr>
<td>1</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td></td>
</tr>
<tr>
<td>1</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td></td>
</tr>
<tr>
<td>1</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td></td>
</tr>
<tr>
<td>1</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td></td>
</tr>
<tr>
<td>1</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td></td>
</tr>
<tr>
<td>1</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td></td>
</tr>
<tr>
<td>1</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td></td>
</tr>
<tr>
<td>1</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td></td>
</tr>
<tr>
<td>1</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td></td>
</tr>
<tr>
<td>1</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td></td>
</tr>
<tr>
<td>1</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td></td>
</tr>
</table>
</div>
</div>
</body>
</html>
效果图如下：
一定要爱着点儿什么，恰似草木对光阴的钟情。
