表格怎么固定表头

1个回答

写回答

13665810809

2022-11-22 14:59

+ 关注

CSS
CSS

要固定表格的表头,可以使用CSS样式表中的position属性和z-index属性。

1. 在表格外面包裹一个

元素,为其设置固定的高度和overflow属性的值为auto,使其可以出现滚动条。

2. 选中表格的元素,并为其设置position属性的值为fixed和z-index属性的值为1,使其固定在窗口的顶部,并且不会被其他元素遮盖。

3. 设置表格的tbody元素的margin-top属性的值为元素的高度,使其不会被元素遮盖。

举个例子如下:

HTML代码:

头部单元格1头部单元格2头部单元格3
行1-单元格1行1-单元格2行1-单元格3
行2-单元格1行2-单元格2行2-单元格3
行3-单元格1行3-单元格2行3-单元格3

CSS代码:

.table-wrapper {

height: 200px;

overflow: auto;

}

table {

border-collapse: collapse;

}

th {

background-color: #f1f1f1;

position: fixed;

z-index: 1;

width: 100px;

}

td {

text-align: center;

border: 1px solid black;

padding: 8px;

}

tbody {

margin-top: 40px;

}

举报有用(17分享收藏

Copyright © 2025 IZhiDa.com All Rights Reserved.

知答 版权所有 粤ICP备2023042255号