當(dāng)前位置：首頁 > 编程资源 > 综合教程 >内容正文

综合教程

tbody添加垂直滚动条

發(fā)布時間：2023/12/15 综合教程 27 生活家

生活随笔收集整理的這篇文章主要介紹了 tbody添加垂直滚动条小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

法一：

用2個table：

<table width="300" border="0" cellpadding="0" cellspacing="1" bgcolor="#0099CC">
<tr> 
<th width="25%" nowrap><font color="#FFFFFF"> 123 </th>
<th width="25%" nowrap><font color="#FFFFFF"> 456 </th>
<th width="25%" nowrap><font color="#FFFFFF"> 789 </th>
<th width="25%" nowrap><font color="#FFFFFF"> abc </th>
</tr>
</table>
<span>
<table width="300" border="0" cellpadding="0" cellspacing="1" bgcolor="#0099CC">
<tr bgcolor="#FFFFFF"> 
<td width="25%"> 1</td>

<td width="25%"> 4</td>

<td width="25%"> 7</td>

<td width="25%"> a</td>
</tr>

<tr bgcolor="#FFFFFF"> 
<td > 2</td>

<td > 5</td>

<td> 8</td>

<td> b</td>
</tr>

<tr bgcolor="#FFFFFF"> 
<td> 3 </td>

<td> 6 </td>

<td> 9 </td>

<td > c </td>
</tr>
<tr bgcolor="#FFFFFF"> 
<td> 3 </td>

<td> 6 </td>

<td> 9 </td>

<td > c </td>
</tr>
<tr bgcolor="#FFFFFF"> 
<td> 3 </td>

<td> 6 </td>

<td> 9 </td>

<td > c </td>
</tr>
<tr bgcolor="#FFFFFF"> 
<td> 3 </td>

<td> 6 </td>

<td> 9 </td>

<td > c </td>
</tr>
<tr bgcolor="#FFFFFF"> 
<td> 3 </td>

<td> 6 </td>

<td> 9 </td>

<td > c </td>
</tr>
<tr bgcolor="#FFFFFF"> 
<td> 3 </td>

<td> 6 </td>

<td> 9 </td>

<td > c </td>
</tr>
<tr bgcolor="#FFFFFF"> 
<td> 3 </td>

<td> 6 </td>

<td> 9 </td>

<td > c </td>
</tr>
<tr bgcolor="#FFFFFF"> 
<td> 3 </td>

<td> 6 </td>

<td> 9 </td>

<td > c </td>
</tr>
<tr bgcolor="#FFFFFF"> 
<td> 3 </td>

<td> 6 </td>

<td> 9 </td>

<td > c </td>
</tr>
<tr bgcolor="#FFFFFF"> 
<td> 3 </td>

<td> 6 </td>

<td> 9 </td>

<td > c </td>
</tr>
</table>
</span>

法二：

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

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

3，因為都設(shè)置成block所以要給td手動添加寬度 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>

View Code

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

總結(jié)

以上是生活随笔為你收集整理的tbody添加垂直滚动条的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇： mysql cookbook
下一篇：花三千弄个时兴的头发负离子吹风机真的是