HTML Table overflow-y 以固定的 y 轴标题滚动

Question

我有一个 table，x 轴和 y 轴都带有 headers，我希望 table 在 y 轴溢出时滚动，同时保留 header.

在 <table> 元素中使用 display: block; overflow-y: auto; 给我一些滚动，但我丢失了 y 轴标签。

这是一支简单的笔work-in-progress：https://codepen.io/Malgalin/pen/wNZRPz?editors=0100

我也尝试过使 th[scope='row'] 元素具有固定位置的版本，这种方法可行，但它会造成混乱 over-lapping headers 并使初始空白顶部左角单元格消失。

如果需要，我很高兴看到使用 JS 或 jQuery 的答案。

Answer 1

也许你正在寻找的已经解决了，看看并告诉我： https://whosebug.com/a/50649696/5796090

在上面的 link 中，您可以使用 CSS 网格找到具有固定 header 的可滚动 table。

基本上，您在网格中为 thead 和 tbody 定义了 2 个区域，并为第二个区域设置了溢出。

table {
  display: inline-grid;
  grid-template-areas: 
  "head-fixed" 
  "body-scrollable";
}

thead {
  grid-area: head-fixed;
}

tbody {
  grid-area: body-scrollable;
  overflow: auto;
  height: 400px; /* define height depending on your needs */
}

希望对您有所帮助:)

Answer 2

您可以为您的 headers 使用 sticky 位置。您需要稍微更改一下 HTML，您需要 table.

的包装器

<div id='table_wrapper'>
  <table> .... </table>
</div>

现在您可以将 TH 元素设置为 position: sticky，对于 thead，使其固定在 top: 0px，对于 tbody 使用 left: 0px。

仅使用它对您的实际代码不起作用，因为您有一些错误。因此，首先关闭 thead 标签并正确打开一个 tbody 标签（现在您打开 thead 并关闭一个 tbody）。您需要修复的第二件事是删除 table 元素上的那些 display: block，当您这样做时，您会破坏 table.

检查这个编辑过的codepen link https://codepen.io/anon/pen/daLrGZ?editors=1100

请注意，您需要添加一些背景。

编辑：如果您希望左上角的 TH 保留在其余的 TH 之上，请添加：

table thead tr th:first-child {
  left: 0px; //so it also sticks to the left
  z-index: 2; //so it's over the rest
}

HTML Table overflow-y 以固定的 y 轴标题滚动

HTML Table overflow-y scrolling with fixed y axis headings

html

javascript

css-tables