纯css实现table滚动条（纯css实现div滚动条）纯css实现table滚动条(纯css实现div滚动条)，主要通过设定⾼度、宽度及overflow属性实现，留存备⽤。
代码如下：
<html>
<head>
<style type="text/css">
/* 基本通⽤样式，与滚动条⽆关 */
div{
margin:0 auto;
padding:5px;
background-color: #e0eaf7;
}
table{
width:100%;
text-align:center;
border-collapse:collapse;
border:1px solid #8daaec;
}
td{
border:1px solid #8daaec;
padding: 5px;
}
/* 上下滚动 */
div.sx{
height:80px;
overflow:auto;
}
/* 左右滚动 */
<{
width:600px;
overflow:auto;
}
/* 上下左右滚动 */
div.sxzy{
height:80px;
width:600px;
overflow:auto;
}
</style>
</head>
<body>
<!-- ⽆滚动条 -->
<div>
<table>
<tr>
<td align="center" nowrap="nowrap" >⽆滚动条</td>
<td align="center" nowrap="nowrap" >⽆滚动条</td>
<td align="center" nowrap="nowrap" >⽆滚动条</td>
<td align="center" nowrap="nowrap" >⽆滚动条</td>
</tr>
<tr>
<td align="center" nowrap="nowrap" >⽆滚动条</td>
<td align="center" nowrap="nowrap" >⽆滚动条</td>
<td align="center" nowrap="nowrap" >⽆滚动条</td>
<td align="center" nowrap="nowrap" >⽆滚动条</td>
<tr>
<td align="center" nowrap="nowrap" >⽆滚动条</td> <td align="center" nowrap="nowrap" >⽆滚动条</td> <td align="center" nowrap="nowrap" >⽆滚动条</td> <td align="center" nowrap="nowrap" >⽆滚动条</td> </tr>
</table>
</div>
<br><br>
<!-- 上下滚动 -->
<div class="sx">
<table >
<tr>
<td align="center" nowrap="nowrap" >上线滚动</td> <td align="center" nowrap="nowrap" >上线滚动</td> <td align="center" nowrap="nowrap" >上线滚动</td> <td align="center" nowrap="nowrap" >上线滚动</td> </tr>
<tr>
<td align="center" nowrap="nowrap" >上线滚动</td> <td align="center" nowrap="nowrap" >上线滚动</td> <td align="center" nowrap="nowrap" >上线滚动</td> <td align="center" nowrap="nowrap" >上线滚动</td> </tr>
<tr>
<td align="center" nowrap="nowrap" >上线滚动</td> <td align="center" nowrap="nowrap" >上线滚动</td> <td align="center" nowrap="nowrap" >上线滚动</td> <td align="center" nowrap="nowrap" >上线滚动</td> </tr>
<tr>
<td align="center" nowrap="nowrap" >上线滚动</td> <td align="center" nowrap="nowrap" >上线滚动</td> <td align="center" nowrap="nowrap" >上线滚动</td> <td align="center" nowrap="nowrap" >上线滚动</td> </tr>
<tr>
<td align="center" nowrap="nowrap" >上线滚动</td> <td align="center" nowrap="nowrap" >上线滚动</td> <td align="center" nowrap="nowrap" >上线滚动</td> <td align="center" nowrap="nowrap" >上线滚动</td> </tr>
</table>
</div>
<br><br>
<!-- 左右滚动 -->
<div class="zy">
<table>
<tr>
<td align="center" nowrap="nowrap" >左右滚动</td> <td align="center" nowrap="nowrap" >左右滚动</td> <td align="center" nowrap="nowrap" >左右滚动</td> <td align="center" nowrap="nowrap" >左
右滚动</td> <td align="center" nowrap="nowrap" >左右滚动</td> <td align="center" nowrap="nowrap" >左右滚动</td> <td align="center" nowrap="nowrap" >左右滚动</td> <td align="center" nowrap="nowrap" >左右滚动</td> <td align="center" nowrap="nowrap" >左右滚动</td> <td align="center" nowrap="nowrap" >左右滚动</td> <td align="center" nowrap="nowrap" >左右滚动</td> <td align="center" nowrap="nowrap" >左右滚动</td> </tr>
<td align="center" nowrap="nowrap" >左右滚动</td>
<td align="center" nowrap="nowrap" >左右滚动</td>
<td align="center" nowrap="nowrap" >左右滚动</td>
<td align="center" nowrap="nowrap" >左右滚动</td>
<td align="center" nowrap="nowrap" >左右滚动</td>
<td align="center" nowrap="nowrap" >左右滚动</td>
<td align="center" nowrap="nowrap" >左右滚动</td>
<td align="center" nowrap="nowrap" >左右滚动</td>
<td align="center" nowrap="nowrap" >左右滚动</td>
<td align="center" nowrap="nowrap" >左右滚动</td>
<td align="center" nowrap="nowrap" >左右滚动</td>
<td align="center" nowrap="nowrap" >左右滚动</td>
</tr>
<tr>
<td align="center" nowrap="nowrap" >左右滚动</td>
<td align="center" nowrap="nowrap" >左右滚动</td>
html横向滚动条样式<td align="center" nowrap="nowrap" >左右滚动</td>
<td align="center" nowrap="nowrap" >左右滚动</td>
<td align="center" nowrap="nowrap" >左右滚动</td>
<td align="center" nowrap="nowrap" >左右滚动</td>
<td align="center" nowrap="nowrap" >左右滚动</td>
<td align="center" nowrap="nowrap" >左右滚动</td>
<td align="center" nowrap="nowrap" >左右滚动</td>
<td align="center" nowrap="nowrap" >左右滚动</td>
<td align="center" nowrap="nowrap" >左右滚动</td>
<td align="center" nowrap="nowrap" >左右滚动</td>
</tr>
<tr>
<td align="center" nowrap="nowrap" >左右滚动</td>
<td align="center" nowrap="nowrap" >左右滚动</td>
<td align="center" nowrap="nowrap" >左右滚动</td>
<td align="center" nowrap="nowrap" >左右滚动</td>
<td align="center" nowrap="nowrap" >左右滚动</td>
<td align="center" nowrap="nowrap" >左右滚动</td>
<td align="center" nowrap="nowrap" >左右滚动</td>
<td align="center" nowrap="nowrap" >左右滚动</td>
<td align="center" nowrap="nowrap" >左右滚动</td>
<td align="center" nowrap="nowrap" >左右滚动</td>
<td align="center" nowrap="nowrap" >左右滚动</td>
<td align="center" nowrap="nowrap" >左右滚动</td>
</tr>
</table>
</div>
<br><br>
<!-- 上下左右滚动 -->
<div class="sxzy">
<table>
<tr>
<td align="center" nowrap="nowrap" >上下左右滚动</td> <td align="center" nowrap="nowrap" >上下左右滚动</td> <td align="center" nowrap="nowrap" >上下左右滚动</td> <td align="center" nowrap="nowrap" >上下左右滚动</td> <td align="center" nowrap="nowrap" >上下左右滚动</td> <td align="center" nowrap="nowrap" >上下左右滚动</td> <td align="center" nowrap="nowrap" >上下左右滚动</td> <td align="center" nowrap="nowrap" >上下左右滚动</td> <td align="center" nowrap="nowrap" >上下左右滚动</td> <td align="center" nowrap="nowrap" >上下左右滚动</td> <td align="center" nowrap="nowrap" >上下左右滚动</td> </tr>
<tr>
<td align="center" nowrap="nowrap" >上下左右滚动</td> <td align="center" nowrap="nowrap" >上下左右滚动</td>
<td align="center" nowrap="nowrap" >上下左右滚动</td> <td align="center" nowrap="nowrap" >上下左右滚动</td> <td align="center" nowrap="nowrap" >上下左右滚动</td> <td align="center" nowrap="nowrap" >上下左右滚动</td> <td align="center" nowrap="nowrap" >上下左右滚动</td> <td align="center" nowrap="nowrap" >上下左右滚动</td> <td align="center" nowrap="nowrap" >上下左右滚动</td> <td align="center" nowrap="nowrap" >上下左右滚动</td> <td align="center" nowrap="nowrap" >上下左右滚动</td> </tr>
<tr>
<td align="center" nowrap="nowrap" >上下左右滚动</td> <td align="center" nowrap="nowrap" >上下左右滚动</td> <td align="center" nowrap="nowrap" >上下左右滚动</td> <td align="center" nowrap="nowrap" >上下左右滚动</td> <td align="center" nowrap="nowrap" >上下左右滚动</td> <td align="center" nowrap="nowrap" >上下左右滚动</td> <td align="center" nowrap="nowrap" >上下左右滚动</td> <td align="center" nowrap="nowrap" >上下左右滚动</td> <td align="center" nowrap=
"nowrap" >上下左右滚动</td> <td align="center" nowrap="nowrap" >上下左右滚动</td> <td align="center" nowrap="nowrap" >上下左右滚动</td> </tr>
<tr>
<td align="center" nowrap="nowrap" >上下左右滚动</td> <td align="center" nowrap="nowrap" >上下左右滚动</td> <td align="center" nowrap="nowrap" >上下左右滚动</td> <td align="center" nowrap="nowrap" >上下左右滚动</td> <td align="center" nowrap="nowrap" >上下左右滚动</td> <td align="center" nowrap="nowrap" >上下左右滚动</td> <td align="center" nowrap="nowrap" >上下左右滚动</td> <td align="center" nowrap="nowrap" >上下左右滚动</td> <td align="center" nowrap="nowrap" >上下左右滚动</td> <td align="center" nowrap="nowrap" >上下左右滚动</td> <td align="center" nowrap="nowrap" >上下左右滚动</td> </tr>
<tr>
<td align="center" nowrap="nowrap" >上下左右滚动</td> <td align="center" nowrap="nowrap" >上下左右滚动</td> <td align="center" nowrap="nowrap" >上下左右滚动</td> <td align="center" nowrap="nowrap" >上下左右滚动</td> <td align="center" nowrap="nowrap" >上下左右滚动</td> <td align="center" nowrap="nowrap" >上下左右滚动</td> <td align="center" nowrap="nowrap" >上下
左右滚动</td> <td align="center" nowrap="nowrap" >上下左右滚动</td> <td align="center" nowrap="nowrap" >上下左右滚动</td> <td align="center" nowrap="nowrap" >上下左右滚动</td> <td align="center" nowrap="nowrap" >上下左右滚动</td> </tr>
</table>
</div>
</body>
</html>
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论