在我无法控制的容器中使用 vanilla JavaScript 粘贴多行标题和多列

Question

我的代码将返回一个表格的 HTML，该表格将被放入容器中（例如 div）。我无法控制这个根容器/div，但我的代码可以在里面放任何东西，比如在必要时嵌套div。

表格的行和列可能会超出父容器的视口。

• thead 中的表格将有 2-3 行需要在垂直滚动时卡住/冻结。
• 表格将有 X # 列需要在水平滚动时卡住/冻结。

我正在尝试使用position: sticky，但没有运气。

我看到了Sticky multiple table header (thead) rows using only css/bootstrap，但这不起作用，因为它需要为thead 中的每一行设置显式高度，我不能这样做，因为thead 行中的内容可能是可变高度。

在下面的示例中，我包含了根/父容器div，但仅此而已。我不能改变它的属性。如果需要，我可以在里面添加更多 divs。

table, th, td
{
  border: 1px solid black;
  border-collapse: collapse;
}

thead
{
  position: sticky;
  z-index: 1;
  background-color: red;
}

tbody td.stuck
{
  background-color: blue;
  position: sticky;
  z-index: 1
}



/* I have no control of this DIV */
/* I am just putting it here for an example */
div
{
  position: absolute;
  top: 20px;
  left: 30px;
  width: 500px;
  height: 200px;
  overflow: auto;
  background-color: yellow;
}

<div>
  <table>
    <thead>
      <tr>
        <td colspan="20">one</td>
      </tr>
      <tr>
        <th>header</th>
        <th>header</th>
        <th>header</th>
        <th>header</th>
        <th>header</th>
        <th>header</th>
        <th>header</th>
        <th>header</th>
        <th>header</th>
        <th>header</th>
        <th>header</th>
        <th>header</th>
        <th>header</th>
        <th>header</th>
        <th>header</th>
        <th>header</th>
        <th>header</th>
        <th>header</th>
        <th>header</th>
        <th>header</th>
      </tr>
     </thead>
     <tbody>
      <tr>
        <td class="stuck">cell</td>
        <td class="stuck">cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
      </tr>
      <tr>
        <td class="stuck">cell</td>
        <td class="stuck">cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
      </tr>
      <tr>
        <td class="stuck">cell</td>
        <td class="stuck">cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
      </tr>
      <tr>
        <td class="stuck">cell</td>
        <td class="stuck">cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
      </tr>
      <tr>
        <td class="stuck">cell</td>
        <td class="stuck">cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
      </tr>
      <tr>
        <td class="stuck">cell</td>
        <td class="stuck">cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
      </tr>
      <tr>
        <td class="stuck">cell</td>
        <td class="stuck">cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
      </tr>
      <tr>
        <td class="stuck">cell</td>
        <td class="stuck">cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
      </tr>
      <tr>
        <td class="stuck">cell</td>
        <td class="stuck">cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
      </tr>
      <tr>
        <td class="stuck">cell</td>
        <td class="stuck">cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
      </tr>
      <tr>
        <td class="stuck">cell</td>
        <td class="stuck">cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
      </tr>
      <tr>
        <td class="stuck">cell</td>
        <td class="stuck">cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
      </tr>
      <tr>
        <td class="stuck">cell</td>
        <td class="stuck">cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
      </tr>
      <tr>
        <td class="stuck">cell</td>
        <td class="stuck">cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
      </tr>
      <tr>
        <td class="stuck">cell</td>
        <td class="stuck">cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
      </tr>
      <tr>
        <td class="stuck">cell</td>
        <td class="stuck">cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
      </tr>
      <tr>
        <td class="stuck">cell</td>
        <td class="stuck">cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
      </tr>
      <tr>
        <td class="stuck">cell</td>
        <td class="stuck">cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
      </tr>
    </tbody>
   </table>
</div>

Answer 1

这是一个仅使用这些粘性元素的top 和left 的解决方案。
如果td.stuck不能是固定宽度，你可以抛出一个javascript来计算宽度。

table, th, td
{
  border: 1px solid black;
  border-collapse: separate;
  border-spacing: 0;
}

thead
{
  position: sticky;
  top: 0;
  z-index: 2;
  background-color: red;
}

tbody td.stuck
{
  background-color: blue;
  position: sticky;
  left: 0;
  z-index: 1;
}

tbody td.stuck:nth-child(2) {
  left: 51px;
}



/* I have no control of this DIV */
/* I am just putting it here for an example */
div
{
  position: absolute;
  top: 20px;
  left: 30px;
  width: 500px;
  height: 200px;
  overflow: auto;
  background-color: yellow;
}

<div>
  <table>
    <thead>
      <tr>
        <td colspan="20">one</td>
      </tr>
      <tr>
        <th>header</th>
        <th>header</th>
        <th>header</th>
        <th>header</th>
        <th>header</th>
        <th>header</th>
        <th>header</th>
        <th>header</th>
        <th>header</th>
        <th>header</th>
        <th>header</th>
        <th>header</th>
        <th>header</th>
        <th>header</th>
        <th>header</th>
        <th>header</th>
        <th>header</th>
        <th>header</th>
        <th>header</th>
        <th>header</th>
      </tr>
     </thead>
     <tbody>
      <tr>
        <td class="stuck">cell</td>
        <td class="stuck">cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
      </tr>
      <tr>
        <td class="stuck">cell</td>
        <td class="stuck">cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
      </tr>
      <tr>
        <td class="stuck">cell</td>
        <td class="stuck">cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
      </tr>
      <tr>
        <td class="stuck">cell</td>
        <td class="stuck">cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
      </tr>
      <tr>
        <td class="stuck">cell</td>
        <td class="stuck">cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
      </tr>
      <tr>
        <td class="stuck">cell</td>
        <td class="stuck">cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
      </tr>
      <tr>
        <td class="stuck">cell</td>
        <td class="stuck">cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
      </tr>
      <tr>
        <td class="stuck">cell</td>
        <td class="stuck">cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
      </tr>
      <tr>
        <td class="stuck">cell</td>
        <td class="stuck">cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
      </tr>
      <tr>
        <td class="stuck">cell</td>
        <td class="stuck">cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
      </tr>
      <tr>
        <td class="stuck">cell</td>
        <td class="stuck">cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
      </tr>
      <tr>
        <td class="stuck">cell</td>
        <td class="stuck">cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
      </tr>
      <tr>
        <td class="stuck">cell</td>
        <td class="stuck">cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
      </tr>
      <tr>
        <td class="stuck">cell</td>
        <td class="stuck">cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
      </tr>
      <tr>
        <td class="stuck">cell</td>
        <td class="stuck">cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
      </tr>
      <tr>
        <td class="stuck">cell</td>
        <td class="stuck">cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
      </tr>
      <tr>
        <td class="stuck">cell</td>
        <td class="stuck">cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
      </tr>
      <tr>
        <td class="stuck">cell</td>
        <td class="stuck">cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
      </tr>
    </tbody>
   </table>
</div>