时间戳

首页 > 解决方案 > HTML 表格：粘性列重叠标题

javascript - HTML 表格：粘性列重叠标题

问题描述

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

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

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

这是我在它发生时看到的

我尝试使用 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/

标签： javascripthtmlcss

解决方案

试试这个解决方案

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

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

推荐阅读