HTML 表格：粘性列重叠标题答案

【问题标题】：HTML table: Sticky column overlapping headerHTML 表格：粘性列重叠标题
【发布时间】：2019-10-29 13:47:34
【问题描述】：

我正在尝试使用 javascript 和 css 实现一个 HTML 表格，该表格可以同时具有粘性列和粘性标题。

基本上，我试图通过在滚动位置更改时将它们翻译到正确的位置来确保标题和列的粘性。

这种技术效果很好，当我水平滚动时，粘性列会正确显示在固定位置，但是当我开始垂直滚动时，粘性列单元格会与标题单元格重叠并隐藏它们。

Here is what I am seeing when it happens

我尝试使用 z-index 以确保标题始终位于行的顶部，但由于某种原因它不起作用。

如果有人遇到过这个问题并能分享解决方法，那将不胜感激。

提前致谢。

HTML：

<table class="tablesorter">
    <thead class="sticky-header">
        <tr>
            <th class="sticky-column">Whatever Header</th>
            <th>Whatever Header</th>
            <th>Whatever Header</th>
            ...
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="sticky-column">Whatever</td>
            <td>Whatever</td>
            ...
        </tr>
        <tr>
            <td class="sticky-column">Whatever</td>
            <td>Whatever</td>
            ...
        </tr>
    </tbody>
</table>

Javascript：

var $win = $(window),
$stickyHeader = $('.sticky-header'),
$stickyColumns = $('.sticky-column');

$(document).on('scroll', function () {
    deltaY = $win.scrollTop() - $stickyHeader.offset().top;
    deltaX = $win.scrollLeft() - $stickyHeader.offset().left;
    $stickyHeader.children().css({
        "transform": "translate(0px," + (deltaY > 0 ? deltaY : 0) + 
"px)"
    });
    $stickyColumns.css({
        "transform": "translate(" + (deltaX > 0 ? deltaX : 0) + "px, 
0px)"
    });
});

CSS：

    table {
    margin: 100px auto 800px auto;
}

thead th {
  background-color: yellow;
  border-right: 2px solid black;
  border-left: 2px solid black;
  border-bottom: 1px solid black;
  border-top: 1px solid black;
  height: 60px;
  z-index: 3;
}
tbody td {
  background-color: red;
  border-right: 2px solid black;
  border-left: 2px solid black;
  border-bottom: 1px solid black;
  border-top: 1px solid black;
  height: 30px;
  z-index: 1;
}

tbody td.sticky-column {
  z-index: 2;
}

tbody th.sticky-column {
  z-index: 4;
}

这里是重现问题的 JSFiddle： http://jsfiddle.net/asoua/5942rqty/

【问题讨论】：

标签： javascript html css

【解决方案1】：

在第 th 个单元格上设置 z-index:1。

【讨论】：

【解决方案2】：

这是针对带有粘性列和行标题的 HTML 表格的解决方案，仅使用 CSS。欲了解更多信息，您可以查看here。

/* set some spacing (optional)*/
td,
th {
  padding: 20px;
}

/* style columns table headings*/
th[scope=col] {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: teal;
}

/* style columns headings first element*/
th[scope=col]:nth-of-type(1) {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  left: 0;
  z-index: 2;
  background-color: peru;
}

/* style rows table headings*/
th[scope=row] {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 1;
  background-color: chocolate;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Sales</title>
</head>

<body>
  <h1>ACME Company</h1>
  <table>
    <tr>
      <th scope="col">Sales by Country</th>
      <th scope="col">January</th>
      <th scope="col">February</th>
      <th scope="col">March</th>
      <th scope="col">April</th>
      <th scope="col">May</th>
      <th scope="col">June</th>
      <th scope="col">July</th>
      <th scope="col">August</th>
      <th scope="col">September</th>
      <th scope="col">October</th>
      <th scope="col">November</th>
      <th scope="col">December</th>
    </tr>
    <tr>
      <th scope="row">Portugal</th>
      <td>50.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
    </tr>
    <tr>
      <th scope="row">Spain</th>
      <td>50.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
    </tr>
    <tr>
      <th scope="row">France</th>
      <td>50.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
    </tr>
    <tr>
      <th scope="row">Germany</th>
      <td>50.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
    </tr>
    <tr>
      <th scope="row">Italy</th>
      <td>50.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
    </tr>
    <tr>
      <th scope="row">Poland</th>
      <td>50.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
    </tr>
    <tr>
      <th scope="row">Austria</th>
      <td>50.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
    </tr>
    <tr>
      <th scope="row">United States</th>
      <td>50.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
    </tr>
    <tr>
      <th scope="row">England</th>
      <td>50.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
    </tr>
    <tr>
      <th scope="row">Scotland</th>
      <td>50.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
    </tr>
    <tr>
      <th scope="row">Wales</th>
      <td>50.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
    </tr>
  </table>

</body>

</html>

【讨论】：

【解决方案3】：

试试这个解决方案

.sticky-header {
    position: absolute;
    z-index: 4;
}

我建议使用网格而不是表格

【讨论】：

【解决方案4】：

我使用了 z-index 的组合，并更改了您的逻辑以使其正常工作。该角柱需要 x 和 y 轴变换。

var $win = $(window),
    $stickyHeader = $('.sticky-header'),
    $stickyColumns = $('.sticky-column'),
    $stickyCorner = $('.sticky-corner');
    

$(document).on('scroll', function () {
    deltaY = $win.scrollTop() - $stickyHeader.offset().top;
    deltaX = $win.scrollLeft() - $stickyHeader.offset().left;

    $stickyColumns.css({
        "transform": "translate(" + (deltaX > 0 ? deltaX : 0) + "px, 0px)"
    });
    
    $stickyHeader.children().css({
        "transform": "translate(0px," + (deltaY > 0 ? deltaY : 0) + "px)"
    });
    
    $stickyCorner.css({
        "transform": "translate(" + (deltaX > 0 ? deltaX : 0) + "px," + (deltaY > 0 ? deltaY : 0) + "px)"
    });    


});

table {
    margin: 100px auto 800px auto;
}

thead th {
  background-color: yellow;
  border-right: 2px solid black;
  border-left: 2px solid black;
  border-bottom: 1px solid black;
  border-top: 1px solid black;
  height: 60px;
  z-index: 3;
}
tbody td {
  background-color: red;
  border-right: 2px solid black;
  border-left: 2px solid black;
  border-bottom: 1px solid black;
  border-top: 1px solid black;
  height: 30px;
  z-index: 1;
}

tbody td.sticky-column {
  z-index: 1;
}

thead tr.sticky-column {
  z-index: 2;
}

thead th.sticky-corner {
  background-color: orange;
  z-index: 10;
  position: relative;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="tablesorter">
    <thead>
        <tr class="sticky-header">
            <th class="sticky-corner">Whatever Header</th>
            <th>Whatever Header</th>
            <th>Whatever Header</th>
            <th>Whatever Header</th>
            <th>Whatever Header</th>
            <th>Whatever Header</th>
            <th>Whatever Header</th>
            <th>Whatever Header</th>
            <th>Whatever Header</th>
            <th>Whatever Header</th>
            <th>Whatever Header</th>
            <th>Whatever Header</th>
            <th>Whatever Header</th>
            <th>Whatever Header</th>
            <th>Whatever Header</th>
            <th>Whatever Header</th>
            <th>Whatever Header</th>
            <th>Whatever Header</th>
            <th>Whatever Header</th>
            <th>Whatever Header</th>
            <th>Whatever Header</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="sticky-column">Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
        </tr>
        <tr>
            <td class="sticky-column">Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
        </tr>
        <tr>
            <td class="sticky-column">Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
        </tr>
        <tr>
            <td class="sticky-column">Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
        </tr>
        <tr>
            <td class="sticky-column">Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
        </tr>
        <tr>
            <td class="sticky-column">Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
        </tr>
        <tr>
            <td class="sticky-column">Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
        </tr>
        <tr>
            <td class="sticky-column">Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
        </tr>
        <tr>
            <td class="sticky-column">Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
        </tr>
        <tr>
            <td class="sticky-column">Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
        </tr>
    </tbody>
</table>

【讨论】：

嗨，它对你有用吗？因为它不适合我，所以我在 chrome 和 safari 上都对其进行了测试
啊，我只在 Firefox 上进行了测试，我也看到了在 Chrome 中不起作用。我目前没有时间针对 Chrome 进行更多调整，但希望它能给您一些想法，让您自己尝试一下？
立即尝试。 'z-index' 仅适用于定位元素，因此我将那个角更改为“位置：相对”。

【解决方案5】：

您可以使用以下属性：

  position: -webkit-sticky; /* for Safari */
  position: sticky;

如果您在列的第一个子列或完整标题上使用它，它将产生您想要的效果。

    <tbody>
        <tr>
            <th>Whatever</th>
            <td>Whatever</td>
            ...
        </tr>
        <tr>
            <th>Whatever</th>
            <td>Whatever</td>
            ...
        </tr>
    </tbody>


thead th {
  z-index:999;
  top:0;
  position: -webkit-sticky;
  position: sticky;
}

tbody th {
  left:0;
  position: -webkit-sticky;
  position: sticky;
}

tbody th:first-child {
  position: -webkit-sticky; 
  position: sticky;
  z-index: 999;
  left:0;
}

试试吧！

【讨论】：

我试过了，但sticky 位置似乎在表格内不起作用。
我刚试过。完美运行。查看属性 left 和 top 并确保表格主体上每一行的每个第一项都是
它有同样的重叠问题，在这里检查：jsfiddle.net/asoua/Lg1rphc8/11
将 tbody th:first-child z-index 更改为 998 或更低。