带有固定 y 轴标题的 HTML 表格溢出-y 滚动答案

【问题标题】：HTML Table overflow-y scrolling with fixed y axis headings带有固定 y 轴标题的 HTML 表格溢出-y 滚动
【发布时间】：2019-02-21 01:15:23
【问题描述】：

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

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

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

我还尝试了使th[scope='row'] 元素具有固定位置的版本，这有点工作，但它会创建混乱的重叠标题并使最初的空白左上角单元格消失。

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

【问题讨论】：

标签： javascript html css-tables

【解决方案1】：

您可以使用sticky 位置作为您的标题。你需要稍微改变一下你的 HTML，你需要一个表格的包装器。

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

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

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

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

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

编辑：如果您希望左上角的 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
}

【讨论】：

啊，为草率的 thead 和 tbody 标签道歉......我的工作编辑器中的一些菜鸟复制粘贴。我现在看看你的建议。
这看起来大部分都在那里，但是在将第 th 个元素设置为具有不透明背景之后，左上角的空白单元格仍然是透明的。我在那里尝试了&nbsp; 来欺骗它，让它将其视为有内容，但仍然没有运气。有什么想法吗？
很奇怪，我可以为所有 TH 设置背景并且左上角的单元格不是空白codepen.io/anon/pen/daLrGZ?editors=1100
是的，我知道它在做什么。它正在更改颜色，但它将空白单元格视为可移动而不是固定，因此当您滚动时，用户名在标题列上方可见......但这不是一个交易破坏者。我想我现在可以使用它。谢谢。
哦，完美！谢谢。可惜我不能接受两次答案:)

【解决方案2】：

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

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

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

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 */
}

希望有帮助:)

【讨论】：

嗯，我试了一下，有一些变化，但没有运气。不过，我稍后可能会尝试实现这个版本。我喜欢基于网格的方法的想法。谢谢
它更简单，具有声明性，并且您不必使用包装器（避免分裂症）。您在上面的链接中有一个工作示例。请让我知道你是否有什么困难:)