Question

我有一个带有x和y轴标题的表，并希望该表在y轴上溢出时滚动并保留标题。

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

这是一个简单的笔进行中：https://codepen.io/Malgalin/pen/wNZRPz?editors=0100

我也尝试过使th[scope='row']元素具有固定位置的版本，这种方法可以工作，但是会产生混乱的重叠标题，并使最初的空白左上角单元格消失。

很高兴看到必要时使用JS或jQuery的答案。

Answer 1

您可以在标题中使用sticky位置。您需要稍微更改HTML，需要为表包装。

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

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

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

检查此编辑的代码笔链接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
}

Answer 2

也许您正在寻找的东西已经解决，请看一下并告诉我： https://stackoverflow.com/a/50649696/5796090

在上面的链接中，您可以使用CSS Grid找到具有固定标题的可滚动表格。

基本上，您在网格中为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 */
}

希望获得帮助：）

固定y轴标题的HTML表格溢出y滚动

2 个答案: