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>

您可以将position：sticky stick放置在元素的初始位置吗？

0 个答案: