思路就是 

1，把tbody设置成display:block，然后就对其高度设置一个固定值，overflow设置成auto。 

2，把thead的tr设置成display:block。 

3，因为都设置成block所以要给td手动添加宽度 width:200px 

代码如下： 

代码如下:

<table> 
<thead> 
<tr> 
<th>Id</th> 
<th>Name</th> 
<th>Category</th> 
<th>MonthAmount</th> 
<th>hasBackUp</th> 
<th>score</th> 
</tr> 
</thead> 
<tbody> 
<tr> 
<td>23</td> 
<td>South Bearing</td> 
<td>Glass/Material</td> 
<td>1234444</td> 
<td>TRUE</td> 
<td>3456.00</td> 
</tr> 
<tr> 
<td>23</td> 
<td>South Bearing</td> 
<td>Glass/Material</td> 
<td>1234444</td> 
<td>TRUE</td> 
<td>3456.00</td> 
</tr> 
<tr> 
<td>23</td> 
<td>South Bearing</td> 
<td>Glass/Material</td> 
<td>1234444</td> 
<td>TRUE</td> 
<td>3456.00</td> 
</tr> 
<tr> 
<td>23</td> 
<td>South Bearing</td> 
<td>Glass/Material</td> 
<td>1234444</td> 
<td>TRUE</td> 
<td>3456.00</td> 
</tr> 
<tr> 
<td>23</td> 
<td>South Bearing</td> 
<td>Glass/Material</td> 
<td>1234444</td> 
<td>TRUE</td> 
<td>3456.00</td> 
</tr> 
<tr> 
<td>23</td> 
<td>South Bearing</td> 
<td>Glass/Material</td> 
<td>1234444</td> 
<td>TRUE</td> 
<td>3456.00</td> 
</tr> 
<tr> 
<td>23</td> 
<td>South Bearing</td> 
<td>Glass/Material</td> 
<td>1234444</td> 
<td>TRUE</td> 
<td>3456.00</td> 
</tr> 
<tr> 
<td>23</td> 
<td>South Bearing</td> 
<td>Glass/Material</td> 
<td>1234444</td> 
<td>TRUE</td> 
<td>3456.00</td> 
</tr> 
<tr> 
<td>23</td> 
<td>South Bearing</td> 
<td>Glass/Material</td> 
<td>1234444</td> 
<td>TRUE</td> 
<td>3456.00</td> 
</tr> 
<tr> 
<td>23</td> 
<td>South Bearing</td> 
<td>Glass/Material</td> 
<td>1234444</td> 
<td>TRUE</td> 
<td>3456.00</td> 
</tr> 
<tr> 
<td>23</td> 
<td>South Bearing</td> 
<td>Glass/Material</td> 
<td>1234444</td> 
<td>TRUE</td> 
<td>3456.00</td> 
</tr> 
</tbody> 
</table> 

css 

代码如下:

.table thead tr { 
display:block; 
} 
.table tbody { 
display: block; 
height: 200px; 
overflow: auto; 
} 
.table th { 
width:20%; 
} 
.table td { 
width:20%; 
} 

 本文由职坐标整理发布，更多相关内容，请关注职坐标WEB前端HTML/CSS频道！