复杂表格标题的位置粘滞

Question

我试图获得一个粘性表头来处理复杂的标头。它适用于标准表。该表将粘贴在顶行，而不是第二行，导致标题看起来＆＃34;出了问题＆＃34;或者有点交错。我试着把这个位置贴在thead上，而且似乎什么也没做。

这是我的表：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

我不喜欢这个解决方案，因为这个空间很难＆＃34;编码，但它按预期工作，我想，不是吗？

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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>