html-table tbody加滚动条

思路就是 
1,把tbody设置成display:block,而后就对其高度设置一个固定值,overflow设置成auto。 
2,把thead的tr设置成display:block。 
3,由于都设置成block因此要给td手动添加宽度 width:200px 
亲测有效css

<table class="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代码:html

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

开源中国改版以后第一次写博客耶,新版本再熟悉中code

相关文章
相关标签/搜索