原生table表头固定，内容滚动

HTML：

<div style="width: 1200px;margin: 0 auto;">
<div class="table-head">
<table>
<colgroup>
<col style="width: 100px;" />
<col />
</colgroup>
<thead>
<tr>
<th style=" width:140px">单元1</th>
<th style=" width:330px">单元2</th>
<th style=" width:250px">单元3</th>
<th style=" width:155px">单元4</th>
<th style=" width:155px">单元5</th>
</tr>
</thead>
</table>
</div>
<div class="table-body">
<table>
<colgroup>
<col style="width: 100px;" />
<col />
</colgroup>
<tbody>
<tr>
<td style=" width:140px">测试1</td>
<td style=" width:330px">测试1</td>
<td style=" width:250px">测试1</td>
<td style=" width:155px">测试1</td>
<td style=" width:155px">测试1</td>
</tr>
</tbody>
</table>
</div>
</div>

css：

.table-head {
padding-right: 4px;
background-color: #e7e7e7;
color: #000;
}
.table-body {
width: 100%;
height: 300px;
overflow-y: scroll;
border-bottom: 1px solid #c0bebe;
}
.table-head table,
.table-body table {
width: 100%;
border-collapse: collapse;
padding-right: 10px;
}
table tr,
th,
td {
height: 40px;
line-height: 40px;
text-align: center;
border: 1px solid #c0bebe;
color: #808080;
}
th{color: #686868;}
.table-body::-webkit-scrollbar {
width: 4px;
/*height: 4px;*/
}
.table-body::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
background: rgba(0, 0, 0, 0.2);
}
.table-body::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
border-radius: 0;
background: rgba(0, 0, 0, 0.1);
}

最后

以上就是凶狠御姐为你收集整理的原生table表头固定，内容滚动的全部内容，希望文章能够帮你解决原生table表头固定，内容滚动所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。