用css給tbody加垂直滾動條的具體思路及樣式代碼
發(fā)布時間：2014-02-10 11:32:12 作者：佚名 
我要評論
我要評論給tbody加垂直滾動條的思路就是把tbody設置成display:block，然后就對其高度設置一個固定值，overflow設置成auto即可，下面有個不錯的示例，大家可以參考下
思路就是
1，把tbody設置成display:block，然后就對其高度設置一個固定值，overflow設置成auto。
2，把thead的tr設置成display:block。
3，因為都設置成block所以要給td手動添加寬度 width:200px
代碼如下：
<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
.table thead tr {
display:block;
}
.table tbody {
display: block;
height: 200px;
overflow: auto;
}
.table th {
width:20%;
}
.table td {
width:20%;
}
1，把tbody設置成display:block，然后就對其高度設置一個固定值，overflow設置成auto。
2，把thead的tr設置成display:block。
3，因為都設置成block所以要給td手動添加寬度 width:200px
代碼如下：
復制代碼
代碼如下:<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
復制代碼
代碼如下:.table thead tr {
display:block;
}
.table tbody {
display: block;
height: 200px;
overflow: auto;
}
.table th {
width:20%;
}
.table td {
width:20%;
}
相關文章
這篇文章主要介紹了css3自定義滾動條樣式寫法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-12-25
本篇文章主要介紹了CSS3自定義滾動條樣式的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-21- 這篇文章主要介紹了純CSS改變webkit內(nèi)核瀏覽器的滾動條樣式,需要的朋友可以參考下2014-04-17
- 使用CSS樣式設置div滾動條，直接充當了文本框的角色，下面為大家介紹下具體的實現(xiàn)，感興趣的朋友可以參考下2013-12-24
- 滾動條的樣式我們可以通過css來控制的，滾動條樣式主要涉及到如下overflow屬性，下面簡單為大家介紹下具體的控制屬性，感性的朋友不要錯過2013-11-01
- 所謂DIV滾動條，就是利用DIV標簽，在里面嵌入CSS樣式表，加入overflow的屬性值，這樣，當div所規(guī)范的區(qū)域內(nèi)的內(nèi)容達到一定程序時，滾動條就派上用場,這里為你介紹DIV滾動條2012-12-23
- 我們大家在瀏覽網(wǎng)頁的時偶爾會看到很漂亮的各種顏色樣式的滾動條，這就是通過css代碼控制來實現(xiàn)的，于是本人搜集整理一番，這里和大家分享一下使用CSS設置滾動條顏色以及如2012-12-16
- 這篇文章主要介紹了CSS 設置滾動條樣式的實例代碼，非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧2018-07-06
