tbody单独有滚动条
时间: 2024-05-06 08:22:15 浏览: 19
在 HTML 中,`tbody` 元素默认是不支持滚动条的,只有 `table` 元素可以设置滚动条。但是可以通过设置 `tbody` 的样式来实现 `tbody` 单独有滚动条。
具体实现方法如下:
1. 首先,需要将 `table` 元素的样式设置为 `position: relative`,这样 `tbody` 元素才能相对于 `table` 元素设置绝对定位。
2. 然后,需要将 `tbody` 元素的样式设置为 `display: block`,这样 `tbody` 元素才能设置滚动条。
3. 最后,设置 `tbody` 元素的高度和 `overflow-y: auto`,这样 `tbody` 元素就能够显示滚动条了。
示例代码如下:
```html
<table style="position: relative;">
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tbody style="display: block; height: 100px; overflow-y: auto;">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
<td>Row 1, Column 3</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
<td>Row 2, Column 3</td>
</tr>
<!-- ... -->
</tbody>
</table>
```
在上面的示例中,`tbody` 元素设置了 `display: block; height: 100px; overflow-y: auto;`,使其能够单独拥有滚动条。同时,`table` 元素设置了 `position: relative;`,使 `tbody` 元素能够相对于 `table` 元素设置绝对定位。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![html](https://img-home.csdnimg.cn/images/20210720083451.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)