说明
手写的table，设置滚动条时，只设置滚动效果，上下表格对齐，滚动条样式调整
- 表格对齐关键点：table-layout
w3school详细说明
代码
<!DOCTYPE>
<html>
<head>
<title>table</title>
<style>
table tbody {
display:block;
height:195px;
overflow-y:scroll;
}
table thead, tbody tr {
display:table;
width:100%;
table-layout:fixed;
}
table thead {
width: calc( 100% - 4px) /*为了上下对齐 减去滚动条宽度 未设置滚动条宽度时减去 1em*/
}
table thead th{ background:#ccc;}
table td{
text-align:center
}
table tbody::-webkit-scrollbar {/*滚动条整体样式*/
width: 4px; /*高宽分别对应横竖滚动条的尺寸*/
height: 4px;
background-color:red;/*滚动槽颜色*/
}
table tbody::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
border-radius: 5px;
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
background-color:blue;/*滚动条颜色*/
}
table tbody::-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);
}
</style>
</head>
<body>
<div>
<table width="50%" border="1" cellspacing="0" cellpadding="0" style="margin: auto;">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr><td>测试1</td><td>1</td></tr>
<tr><td>测试2</td><td>2</td></tr>
<tr><td>测试3</td><td>3</td></tr>
<tr><td>测试4</td><td>4</td></tr>
<tr><td>测试5</td><td>5</td></tr>
<tr><td>测试6</td><td>6</td></tr>
<tr><td>测试7</td><td>7</td></tr>
<tr><td>测试8</td><td>8</td></tr>
<tr><td>测试9</td><td>9</td></tr>
<tr><td>测试10</td><td>10</td></tr>
<tr><td>测试11</td><td>11</td></tr>
<tr><td>测试12</td><td>12</td></tr>
</tbody>
</table>
</div>
</body>
</html>