table 固定表头
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
tr th {
margin-top: -1px;
position: relative;
}
</style>
</head>
<body>
<div id="table" style="overflow: auto;height:200px;">
<table class="table">
<thead class="table-header">
<tr>
<th>1</th>
<th>1</th>
<th>1</th>
<th>1</th>
</tr>
</thead>
<tbody>
<tr>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
</tbody>
</table>
</div>
<script src="./../../static/management/js/jquery.min.js"></script>
<script>
let tableCont = document.querySelectorAll('tr th');
let tableScroll = document.getElementById('table');
tableScroll.onscroll = () => {
let scrollTop = tableScroll.scrollTop;
if (scrollTop > 0) {
for (let i = 0; i < tableCont.length; i++) {
tableCont[i].style.top = scrollTop + 'px';
}
} else {
for (let i = 0; i < tableCont.length; i++) {
tableCont[i].style.top = scrollTop + 'px';
}
}
}
</script>
</body>
</html>
