版权声明：尊重博主原创文章，转载请注明出处。如有不妥之处，望各位指正。联系方式：[email protected] https://blog.csdn.net/Supreme_Sir/article/details/80979638
闲话少叙，上代码
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.layerManagementTable{
width: 100%;
border: 0.1vw solid #E6E6E6;
border-collapse: collapse;
color: #666;
}
.layerManagementTable thead, .layerManagementTable tbody tr:nth-child(even), .layerManagementTable tbody tr:hover{
background-color: #F2F2F2;
}
.layerManagementTable th, .layerManagementTable td{
border: 0.1vw solid #E6E6E6;
text-align: center;
height: 4vh;
font-size: 1.6vh;
}
.layerManagementTable thead, .layerManagementTable tr{
display: table;
width: 100%;
}
.layerManagementTable tbody{
display: block;
height: 70vh;
overflow-y: scroll;
overflow-x: hidden;
}
.layerManagementTable tbody::-webkit-scrollbar {/*滚动条整体样式*/
width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
height: 1px;
/*display: none;*//*隐藏滚轮*/
}
.layerManagementTable tbody::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
border-radius: 10px;
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
background: #535353;
}
.layerManagementTable tbody::-webkit-scrollbar-track {/*滚动条里面轨道*/
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
border-radius: 10px;
background: #EDEDED;
}
</style>
</head>
<body>
<table class="layerManagementTable">
<thead>
<tr>
<th>数据源</th>
<th>图层名称</th>
<th>图层状态</th>
<th>图层操作</th>
</tr>
</thead>
<tbody id="layerManagementTbody"></tbody>
</table>
<script type="text/javascript">
var s = "";
for (var i = 0; i < 40; i++) {
s += "<tr><td>数据源</td><td>图层名称</td><td>图层状态</td><td>图层操作</td></tr>";
}
document.getElementById('layerManagementTbody').innerHTML += s;
</script>
</body>
</html>