如何创建具有固定标题和第一列的可滚动 HTML 表格？-css教程-PHP中文网

如何创建具有固定标题和第一列的可滚动 HTML 表格？

Mary-Kate Olsen

发布： 2024-11-03 04:00:02

原创

1062 人浏览过

How to Create a Scrollable HTML Table with Fixed Headers and First Column?

创建具有固定标题和第一列的可滚动 HTML 表格

如何创建具有固定列标题和第一列的 HTML 表格滚动表格内容时保持可见？

答案：

要实现此效果，您可以结合使用 CSS 和 JavaScript。具体方法如下：

1.创建 HTML 表格：

<code class="html"><table>
  <thead>
    <tr>
      <th>Column 1 Header</th>
      <th>Column 2 Header</th>
      <th>Column 3 Header</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
    </tr>
    <!-- more table rows -->
  </tbody>
</table></code>

登录后复制

2.固定标题和第一列的 CSS：

<code class="css">table {
  width: 100%;
  overflow: scroll;
}

table thead {
  position: sticky;
  top: 0;
}

table tr td:first-child {
  position: sticky;
  left: 0;
}</code>

登录后复制

此 CSS 确保滚动时表格标题固定在屏幕顶部，并且第一列保持固定在左侧。

3.增强示例：

您还可以使用高级 CSS 网格来实现类似的效果，更好地支持响应能力和屏幕阅读器：

<code class="css">table {
  display: grid;
  grid-template-columns: repeat(3, auto);
  grid-template-rows: auto 1fr;
}

table thead {
  grid-row: 1;
  grid-column: 1 / -1;
}

table tr {
  grid-column: 1 / -1;
}

table tr td:first-child {
  grid-column: 1;
}

table tbody {
  overflow: scroll;
}</code>

登录后复制

注意：提供的示例可能需要一些调整，具体取决于您的具体表格设计和浏览器兼容性要求。

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