[英]HTML table: Sticky column overlapping header
我正在尝试使用 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/
我使用了 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>
试试这个解决方案
.sticky-header {
position: absolute;
z-index: 4;
}
我建议使用网格而不是表格
您可以使用以下属性:
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;
}
尝试一下!
这是针对带有粘性列和行标题的 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>
在第 th 个单元格上设置 z-index:1。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.