首页 >web前端 >css教程 >如何使用 CSS 创建具有固定标题的可滚动表格?

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

Linda Hamilton
Linda Hamilton原创
2024-11-26 10:09:13253浏览

How do I create a scrollable table with fixed headers using 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中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn