thead 固定table表头样式怎么写
时间: 2024-02-05 14:02:59 浏览: 34
你可以使用CSS中的position属性和z-index属性来实现固定表头的效果。具体步骤如下:
1.给表格添加一个父容器,设置它的position为relative。
2.给表格添加一个thead元素,并设置它的position为fixed,top为0。
3.给thead元素设置z-index属性,使其位于其他元素之上。
4.设置表格的tbody元素的margin-top属性,使它腾出thead的高度。
以下是示例代码:
HTML代码:
```
<div class="table-container">
<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>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</tbody>
</table>
</div>
```
CSS代码:
```
.table-container {
position: relative;
}
table {
width: 100%;
border-collapse: collapse;
}
thead {
position: fixed;
top: 0;
z-index: 1;
background-color: #fff; /* 可选:设置背景色 */
}
tbody {
margin-top: 40px; /* 与thead的高度相同 */
}
th, td {
padding: 10px;
border: 1px solid #ccc;
}
```
注意:如果表格有横向滚动条,需要给thead和tbody设置相同的宽度,以保持对齐。