js table 固定第一行
时间: 2023-05-25 21:05:39 浏览: 103
table 第一行第一列 固定
要固定表格的第一行,请将表格的样式设置为`position:fixed`,并使用CSS选择器选中表格的第一行,并将其样式设置为`top:0`-即将表格的第一行固定到页面的顶部。
以下是一个基本的例子,可以固定一个表格的第一行:
HTML:
```
<table class="my-table">
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1 Column 1</td>
<td>Row 1 Column 2</td>
<td>Row 1 Column 3</td>
</tr>
<!-- More rows... -->
</tbody>
</table>
```
CSS:
```
.my-table {
width: 100%;
border-collapse: collapse;
}
.my-table thead th {
background-color: #ddd;
}
.my-table tr {
border-bottom: 1px solid #ddd;
}
.my-table thead th,
.my-table tbody td {
padding: 10px;
text-align: left;
}
.my-table thead th:first-child,
.my-table tbody td:first-child {
width: 20%;
}
.my-table thead th:nth-child(2),
.my-table tbody td:nth-child(2) {
width: 40%;
}
.my-table thead th:last-child,
.my-table tbody td:last-child {
width: 40%;
}
.my-table thead tr {
position: absolute;
top: 0;
}
```
在上面的示例中,表格样式会应用样式,将表格宽度设置为100%,并去除表格中的边框。
第一行的标题背景颜色设置为灰色。
表格的每一行都带有下边框。
表格中的每个单元格都有一定的间隔和左对齐文本。
表格最左边的列和最右边的列各占40%,中间的列占20%。
最后,将表格标题的位置设置为“absolute”并将其固定在页面的顶部`top:0`。 这样,无论用户向下滚动页面,表格标题始终保持在页面的顶部位置。
请注意,如果表格中第一行的高度较大,则可能需要给表格一个额外的上边距来避免第一行遮挡表格中的其他行。
阅读全文