如何使用 CSS 创建具有固定标题的可滚动表格？

使用 CSS 设置具有固定标题的可滚动表格

您的表格既有可滚动主体又有固定标题，但您不确定如何实现此效果。为了解决这个问题，我们使用 将 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。和分离它们的行为并在不影响标题的情况下启用正文滚动。

table tbody, table thead {
  display: block;
}

我们为正文定义溢出和高度属性：

table tbody {
  overflow: auto;
  height: 100px;
}

因为标题和正文是视觉上分离但技术上联系在一起，我们为

设置静态宽度。和元素以确保正确的列对齐。

th {
  width: 72px;
}

td {
  width: 72px;
}

请记住包含正确的 HTML 格式，例如

;对于每一行，包括标题行。

<tr>
  <th>head1</th>
  <th>head2</th>
  <th>head3</th>
  <th>head4</th>
</tr>

以上是如何使用 CSS 创建具有固定标题的可滚动表格？的详细内容。更多信息请关注PHP中文网其他相关文章！