css table 表头不动 内容滚动
时间: 2023-08-10 11:25:57 浏览: 247
要实现表头不动,内容可滚动的效果,可以使用 CSS 的表格布局和固定定位。
首先,将表格布局设置为固定布局 `table-layout: fixed;`,然后将表头设置为固定定位 `position: fixed;`,并设置表头的宽度和每列单元格的宽度相同。
接着,将表格内容设置为相对定位 `position: relative;`,并设置表格内容的高度和 `overflow-y: scroll;`,即可在表头不动的情况下,让表格内容可滚动。
HTML 代码如下:
```html
<table>
<thead>
<tr>
<th>表头1</th>
<th>表头2</th>
<th>表头3</th>
</tr>
</thead>
<tbody>
<tr>
<td>内容1</td>
<td>内容2</td>
<td>内容3</td>
</tr>
<tr>
<td>内容1</td>
<td>内容2</td>
<td>内容3</td>
</tr>
<!-- more rows -->
</tbody>
</table>
```
CSS 代码如下:
```css
table {
table-layout: fixed;
width: 100%;
border-collapse: collapse;
}
thead th {
position: fixed;
top: 0;
height: 50px;
background-color: #fff;
border: 1px solid #ddd;
text-align: left;
width: 100px; /* 每列单元格的宽度 */
}
tbody {
position: relative;
display: block;
height: 300px; /* 表格内容的高度 */
overflow-y: scroll;
}
tbody tr {
border-bottom: 1px solid #ddd;
}
td {
border: 1px solid #ddd;
padding: 10px;
width: 100px; /* 每列单元格的宽度 */
}
```
这样就可以实现表头不动,表格内容可滚动的效果了。
阅读全文
相关推荐
![application/x-rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![rar](https://img-home.csdnimg.cn/images/20241231044955.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)
![pdf](https://img-home.csdnimg.cn/images/20241231044930.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)