HTML中的table加滚动条
<table class="table">
<thead>
<tr>
<td>我是表头1</td>
<td>我是表头2</td>
<td>我是表头3</td>
<td>我是表头4</td>
</tr>
</thead>
<tbody>
<tr>
<td>内容1</td>
<td>内容2</td>
<td>内容3</td>
<td>内容4</td>
</tr>
<tr>
<td>内容1</td>
<td>内容2</td>
<td>内容3</td>
<td>内容4</td>
</tr>
<tr>
<td>内容1</td>
<td>内容2</td>
<td>内容3</td>
<td>内容4</td>
</tr>
<tr>
<td>内容1</td>
<td>内容2</td>
<td>内容3</td>
<td>内容4</td>
</tr>
<tr>
<td>内容1</td>
<td>内容2</td>
<td>内容3</td>
<td>内容4</td>
</tr>
<tr>
<td>内容1</td>
<td>内容2</td>
<td>内容3</td>
<td>内容4</td>
</tr>
<tr>
<td>内容1</td>
<td>内容2</td>
<td>内容3</td>
<td>内容4</td>
</tr>
</tbody>
</table>
.table{
width: 500px;
border-collapse:collapse;
background-color: rgba(45,172,255,.1);
border-right: 1px solid rgba(0,175,237,.3);
border-top: 1px solid rgba(0,175,237,.3);
}
.table tr td{
border-bottom: 1px solid rgba(0,175,237,.3);
border-left: 1px solid rgba(0,175,237,.3);
color: #fff;
font-size: 16px;
padding: 5px 10px;
text-align: center;
}
.table tr td:nth-child(1),
.table tr td:nth-child(2),
.table tr td:nth-child(3){
width: 100px;
}
.table>tbody>tr,.table>thead{
display: table;
width: 100%;
table-layout: fixed; /* 重要 表格固定算法 */
}
.table>tbody{
height: 200px;
overflow: hidden;
display: block;
overflow: hidden;
overflow-y: auto;
}
/* 定义滚动条样式 */
::-webkit-scrollbar {
width: 24px;
height: 143px;
background-color: #ffffff;
}
/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track {
box-shadow: inset 0 0 0px rgba(240, 240, 240, .5);
border-radius: 10px;
background-color: rgba(240, 240, 240, .5);
}
/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
width: 24px;
height: 143px;
background-color: #2D8EFF;
border-radius: 10px;
/* box-shadow: inset 0 0 0px rgba(240, 240, 240, .5);
background-color: rgba(240, 240, 240, .5); */
}
分别来自tbody设置超出固定的高度出现滚动条,没超出不显示。 - 小伍w - 博客园 (cnblogs.com)以及css 设置overflow:scroll 滚动条的样式 - 遇你温柔如初 - 博客园 (cnblogs.com)