html - 复杂表格标题的位置粘性

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

我相信下面的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>