HTML表格：粘性列重叠标题

时间：2019-06-15 00:15:13

标签： javascript html css

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

4 个答案:

答案 0 :(得分：0)

您可以使用以下属性：

  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;
}

尝试一下！

答案 1 :(得分：0)

我结合使用z-index和更改逻辑以使其正常工作。那个角列需要x轴和y轴都进行转换。

ggplot(data_long_count, aes(WEEKDAY, TIME_dec, fill = employee_count)) + geom_tile()

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;
}

答案 2 :(得分：0)

尝试此解决方案

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

我建议使用网格代替表格

答案 3 :(得分：0)

这是针对带有粘性列和行标题的 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>

相关问题
最新问题