復雜表頭的位置粘滯

Question

我正在嘗試使用粘性表頭來處理復雜的標頭。 它適用於標准表。 該表將粘貼在頂行而不是第二行，導致標題看起來“不正常”或有點交錯。 我試着將位置粘在thead上，但似乎沒有做任何事情。

這是我的表：

 table { border: 1px solid black; font-size: 14px; margin: 10px 0; position: relative; } thead tr th { background-color: gray; position: sticky; top: -2px; } thead { border: 1px solid black; line-height: 1.25; overflow: hidden; } td { border: 1px solid black; line-height: 1.25; overflow: hidden; padding: 4px; } 

 <table class='sticky-table'> <thead> <tr> <th rowspan="2">First column</th> <th colspan="3">Top of second column</th> </tr> <tr> <th>One</th> <th>Two</th> <th>Three</th> </tr> </thead> <tbody> <tr> <td>First cell</td> <td>Second cell</td> <td>Third cell</td> <td>Fourth cell</td> </tr> <tr> <td>First cell</td> <td>Second cell</td> <td>Third cell</td> <td>Fourth cell</td> </tr> <tr> <td>First cell</td> <td>Second cell</td> <td>Third cell</td> <td>Fourth cell</td> </tr> <tr> <td>First cell</td> <td>Second cell</td> <td>Third cell</td> <td>Fourth cell</td> </tr> <tr> <td>First cell</td> <td>Second cell</td> <td>Third cell</td> <td>Fourth cell</td> </tr> <tr> <td>First cell</td> <td>Second cell</td> <td>Third cell</td> <td>Fourth cell</td> </tr> <tr> <td>First cell</td> <td>Second cell</td> <td>Third cell</td> <td>Fourth cell</td> </tr> <tr> <td>First cell</td> <td>Second cell</td> <td>Third cell</td> <td>Fourth cell</td> </tr> <tr> <td>First cell</td> <td>Second cell</td> <td>Third cell</td> <td>Fourth cell</td> </tr> <tr> <td>First cell</td> <td>Second cell</td> <td>Third cell</td> <td>Fourth cell</td> </tr> <tr> <td>First cell</td> <td>Second cell</td> <td>Third cell</td> <td>Fourth cell</td> </tr> <tr> <td>First cell</td> <td>Second cell</td> <td>Third cell</td> <td>Fourth cell</td> </tr> <tr> <td>First cell</td> <td>Second cell</td> <td>Third cell</td> <td>Fourth cell</td> </tr> </tbody> </table> 

Answer 1

我不喜歡這個解決方案，因為空間是“硬”編碼的，但它可以按照需要工作，我想，不是嗎？

 table { border: 1px solid black; font-size: 14px; margin: 10px 0; position: relative; } thead tr th { background-color: gray; position: sticky; top: -2px; } .header { background-color: gray; position: sticky; top: 20px; } thead { border: 1px solid black; line-height: 1.25; overflow: hidden; } td { border: 1px solid black; line-height: 1.25; overflow: hidden; padding: 4px; } 

 <table class='sticky-table'> <thead> <tr> <th rowspan="2">First column</th> <th colspan="3">Top of second column</th> </tr> <tr> <th class="header">One</th> <th class="header">Two</th> <th class="header">Three</th> </tr> </thead> <tbody> <tr> <td>First cell</td> <td>Second cell</td> <td>Third cell</td> <td>Fourth cell</td> </tr> <tr> <td>First cell</td> <td>Second cell</td> <td>Third cell</td> <td>Fourth cell</td> </tr> <tr> <td>First cell</td> <td>Second cell</td> <td>Third cell</td> <td>Fourth cell</td> </tr> <tr> <td>First cell</td> <td>Second cell</td> <td>Third cell</td> <td>Fourth cell</td> </tr> <tr> <td>First cell</td> <td>Second cell</td> <td>Third cell</td> <td>Fourth cell</td> </tr> <tr> <td>First cell</td> <td>Second cell</td> <td>Third cell</td> <td>Fourth cell</td> </tr> <tr> <td>First cell</td> <td>Second cell</td> <td>Third cell</td> <td>Fourth cell</td> </tr> <tr> <td>First cell</td> <td>Second cell</td> <td>Third cell</td> <td>Fourth cell</td> </tr> <tr> <td>First cell</td> <td>Second cell</td> <td>Third cell</td> <td>Fourth cell</td> </tr> <tr> <td>First cell</td> <td>Second cell</td> <td>Third cell</td> <td>Fourth cell</td> </tr> <tr> <td>First cell</td> <td>Second cell</td> <td>Third cell</td> <td>Fourth cell</td> </tr> <tr> <td>First cell</td> <td>Second cell</td> <td>Third cell</td> <td>Fourth cell</td> </tr> <tr> <td>First cell</td> <td>Second cell</td> <td>Third cell</td> <td>Fourth cell</td> </tr> </tbody> </table> 

Answer 2

我相信下面的js將解決問題。 邊界有一些奇怪之處，但這些都很合適。

 var tableHeaderTop = document.querySelector('.sticky-table thead').getBoundingClientRect().top; var ths = document.querySelectorAll('.sticky-table thead th') for(var i = 0; i < ths.length; i++) { var th = ths[i]; th.style.top = th.getBoundingClientRect().top - tableHeaderTop + "px"; } 

 table { border: 1px solid black; font-size: 14px; margin: 10px 0; position: relative; } thead tr th { background-color: gray; position: sticky; top: -2px; } thead { border: 1px solid black; line-height: 1.25; overflow: hidden; } td { border: 1px solid black; line-height: 1.25; overflow: hidden; padding: 4px; } 

 <table class='sticky-table'> <thead> <tr> <th rowspan="2">First column</th> <th colspan="3">Top of second column</th> </tr> <tr> <th>One</th> <th>Two</th> <th>Three</th> </tr> </thead> <tbody> <tr> <td>First cell</td> <td>Second cell</td> <td>Third cell</td> <td>Fourth cell</td> </tr> <tr> <td>First cell</td> <td>Second cell</td> <td>Third cell</td> <td>Fourth cell</td> </tr> <tr> <td>First cell</td> <td>Second cell</td> <td>Third cell</td> <td>Fourth cell</td> </tr> <tr> <td>First cell</td> <td>Second cell</td> <td>Third cell</td> <td>Fourth cell</td> </tr> <tr> <td>First cell</td> <td>Second cell</td> <td>Third cell</td> <td>Fourth cell</td> </tr> <tr> <td>First cell</td> <td>Second cell</td> <td>Third cell</td> <td>Fourth cell</td> </tr> <tr> <td>First cell</td> <td>Second cell</td> <td>Third cell</td> <td>Fourth cell</td> </tr> <tr> <td>First cell</td> <td>Second cell</td> <td>Third cell</td> <td>Fourth cell</td> </tr> <tr> <td>First cell</td> <td>Second cell</td> <td>Third cell</td> <td>Fourth cell</td> </tr> <tr> <td>First cell</td> <td>Second cell</td> <td>Third cell</td> <td>Fourth cell</td> </tr> <tr> <td>First cell</td> <td>Second cell</td> <td>Third cell</td> <td>Fourth cell</td> </tr> <tr> <td>First cell</td> <td>Second cell</td> <td>Third cell</td> <td>Fourth cell</td> </tr> <tr> <td>First cell</td> <td>Second cell</td> <td>Third cell</td> <td>Fourth cell</td> </tr> </tbody> </table>