您的表格既有可滚动主体又有固定标题,但您不确定如何实现此效果。为了解决这个问题,我们使用 将 HTML 中的 header 和 body 元素分开。和
。<table> <thead> <tr> <th>head1</th> <th>head2</th> <th>head3</th> <th>head4</th> </tr> </thead> <tbody> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> <td>row 1, cell 2</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> <td>row 1, cell 2</td> <td>row 1, cell 2</td> </tr> </tbody> </table>
接下来,我们为设置display: block。和分离它们的行为并在不影响标题的情况下启用正文滚动。 我们为正文定义溢出和高度属性: 因为标题和正文是视觉上分离但技术上联系在一起,我们为 请记住包含正确的 HTML 格式,例如 table tbody, table thead {
display: block;
}
table tbody {
overflow: auto;
height: 100px;
}
设置静态宽度。和 元素以确保正确的列对齐。 th {
width: 72px;
}
td {
width: 72px;
}
;对于每一行,包括标题行。
<tr>
<th>head1</th>
<th>head2</th>
<th>head3</th>
<th>head4</th>
</tr>
以上是如何使用 CSS 创建具有固定标题的可滚动表格?的详细内容。更多信息请关注PHP中文网其他相关文章!