HTML 表：粘性列重疊標題

Question

我正在嘗試使用 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/

Answer 1

我使用了 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>

Answer 2

試試這個解決方案

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

我建議使用網格而不是表格

Answer 3

您可以使用以下屬性：

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

嘗試一下！

Answer 4

這是針對帶有粘性列和行標題的 HTML 表格的解決方案，僅使用 CSS。 有關更多信息，您可以在此處查看。

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

Answer 5

在第 th 個單元格上設置 z-index:1。