欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

用css給tbody加垂直滾動條的具體思路及樣式代碼

  發(fā)布時間：2014-02-10 11:32:12   作者：佚名   我要評論
給tbody加垂直滾動條的思路就是把tbody設(shè)置成display:block，然后就對其高度設(shè)置一個固定值，overflow設(shè)置成auto即可，下面有個不錯的示例，大家可以參考下
思路就是

1，把tbody設(shè)置成display:block，然后就對其高度設(shè)置一個固定值，overflow設(shè)置成auto。

2，把thead的tr設(shè)置成display:block。

3，因為都設(shè)置成block所以要給td手動添加寬度 width:200px

代碼如下：

復(fù)制代碼
代碼如下:

<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

復(fù)制代碼
代碼如下:

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

相關(guān)文章

  • 詳解css3自定義滾動條樣式寫法

    這篇文章主要介紹了css3自定義滾動條樣式寫法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2017-12-25

  • CSS3自定義滾動條樣式的示例代碼

    本篇文章主要介紹了CSS3自定義滾動條樣式的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2017-08-21

  • 純CSS改變webkit內(nèi)核瀏覽器的滾動條樣式

    這篇文章主要介紹了純CSS改變webkit內(nèi)核瀏覽器的滾動條樣式,需要的朋友可以參考下
    2014-04-17

  • CSS樣式設(shè)置div滾動條示例代碼

    使用CSS樣式設(shè)置div滾動條，直接充當(dāng)了文本框的角色，下面為大家介紹下具體的實現(xiàn)，感興趣的朋友可以參考下
    2013-12-24

  • css使用overflow屬性控制滾動條的樣式

    滾動條的樣式我們可以通過css來控制的，滾動條樣式主要涉及到如下overflow屬性，下面簡單為大家介紹下具體的控制屬性，感性的朋友不要錯過
    2013-11-01

  • div css 滾動條樣式 DIV滾動條屬性及樣式設(shè)置方式

    所謂DIV滾動條，就是利用DIV標(biāo)簽，在里面嵌入CSS樣式表，加入overflow的屬性值，這樣，當(dāng)div所規(guī)范的區(qū)域內(nèi)的內(nèi)容達(dá)到一定程序時，滾動條就派上用場,這里為你介紹DIV滾動條
    2012-12-23

  • css設(shè)置滾動條顏色與樣式以及如何去掉與隱藏滾動條

    我們大家在瀏覽網(wǎng)頁的時偶爾會看到很漂亮的各種顏色樣式的滾動條，這就是通過css代碼控制來實現(xiàn)的，于是本人搜集整理一番，這里和大家分享一下使用CSS設(shè)置滾動條顏色以及如
    2012-12-16

  • CSS 設(shè)置滾動條樣式的實例代碼

    這篇文章主要介紹了CSS 設(shè)置滾動條樣式的實例代碼，非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧
    2018-07-06

最新評論