具有固定y轴标题的HTML Table溢出y滚动 [英] HTML Table overflow-y scrolling with fixed y axis headings

问题描述

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

I have a table with headers for both the x and y axes, and want the table to scroll when it overflows on the y axis while retaining the header.

使用 display：block;溢出-y：自动； < table> 元素中的给了我一些滚动效果，但是丢失了y轴标签。

Using display: block; overflow-y: auto; in the <table> element gives me some scrolling, but I lose the y axis labels.

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

Here's a simple pen work-in-progress: https://codepen.io/Malgalin/pen/wNZRPz?editors=0100

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

I have also tried versions of making the th[scope='row'] elements have a fixed position, which sort of works, but it creates messy over-lapping headers and makes the initial blank top left corner cell disappear.

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

I'm happy to see answers using JS or jQuery if necessary.

推荐答案

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

You can use the sticky position for your headers. You need to change your HTML a little bit, you need a wrapper for the table.

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

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

Now you can set the TH elements to position: sticky and, for the thead, make it stick at top: 0px, for the tbody use left: 0px.

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

Using just that won't work on your actual code since you have some errors though. So, first close the thead tag and open a tbody tag properly (now you open the thead and close a tbody). The second thing you need to fix is to remove those display: block on the table elements, when you do that you break the table.

选中此编辑后的代码笔链接 https://codepen.io/anon / pen / daLrGZ？editors = 1100

Check this edited codepen link https://codepen.io/anon/pen/daLrGZ?editors=1100

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

Note that you'll need to add some background to the th's.

编辑：如果您想让左上角TH停留在其余TH之外，请添加以下内容：

if you want the top left TH to stay over the rest THs add this:

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

这篇关于具有固定y轴标题的HTML Table溢出y滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！