溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了怎么使用CSS給tbody加垂直滾動條，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
思路就是
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%;
}
感謝你能夠認真閱讀完這篇文章，希望小編分享的“怎么使用CSS給tbody加垂直滾動條”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
