纯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;
}
/* 左右滚动 */
div.zy{
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>
<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>
<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>
<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>