css - 你可以在元素的初始位置制作位置：粘性棒吗？

Question

我有一张桌子太长，无法放入其容器中。我在父元素上设置了overflow-x:auto，这样你就可以滚动查看表中的所有值。现在，我希望表格的前两列贴在容器的左侧。我可以在这些单元格上设置 position:sticky ，除了我必须指定它们粘贴的点之外，它工作得很好。如果我不知道第一列的宽度，那么我还能把第二列贴在它旁边吗？在两列上设置 left:0 会使它们重叠，这是不可取的。

我想要的是第一列和第二列最初出现时并排显示，但当用户沿着表格滚动时它们会保留在那里。我会将单元格组合成一个粘性元素，但 HTML 规范不允许这样做（tr 只能有 td/th 个子元素）。理想情况下，我想设置类似“left：initial”的东西，这将使每个元素都粘在它开始的位置。

我怎样才能最好地使用 CSS 来实现呢？

.container {
  overflow-x: auto;
  width: 100px;
}

.stick {
  position: sticky;
  left: 0px;
}

<div class="container">
  <table>
    <thead>
      <tr>
        <th class="stick">Team</th>
        <th class="stick">Name</th>
        <th>A</th>
        <th>B</th>
        <th>C</th>
        <th>D</th>
        <th>...</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="stick">Blue</td>
        <td class="stick">Gary</td>
        <td>8</td>
        <td>12</td>
        <td>4</td>
        <td>0</td>
        <td>...</td>
      </tr>
      <tr>
        <td class="stick">Red</td>
        <td class="stick">Sam</td>
        <td>7</td>
        <td>11</td>
        <td>5</td>
        <td>2</td>
        <td>...</td>
      </tr>
      <tr>
        <td class="stick">Red</td>
        <td class="stick">Joe</td>
        <td>2</td>
        <td>4</td>
        <td>0</td>
        <td>0</td>
        <td>...</td>
      </tr>
    </tbody>
  </table>
</div>

标签： csscss-position