使用位置的表：粘滞并显示：网格

Question

我正在尝试使用display：grid和position：sticky在表格状视图中显示数据，以将前两行标题行和前三列粘贴到随后的每一行。

标题行正确粘贴，但是行中的前三列仅停留了一点滚动，然后向左滚动。是什么导致这种行为？这在这种情况下应该如何起作用吗？

:root {
  --column-width: 70px;
}

.wrapper {
  font-family: sans-serif;
  max-width: 700px;
  height: 300px;
  overflow: auto;
}

.table-container {
  width: auto;
}

.table {
  position: relative;
  display: grid;
  grid-template-columns: 200px repeat(14, var(--column-width));
}

.table.header {
  position: sticky;
  top: 0;
  z-index: 999;
}

.table.header+.table.header {
  position: sticky;
  top: 36px;
  ;
}

.table.header .row {
  background: #ccc !important;
}

.table .row.sticky {
  position: sticky;
  background: #eee;
}

.table .row.sticky:nth-child(1) {
  left: 0px;
}

.table .row.sticky:nth-child(2) {
  left: 200px;
}

.table .row.sticky:nth-child(3) {
  left: 270px;
}

input {
  width: 45px;
}

<div class="wrapper">

  <div class="table-container" role="table" aria-label="Destinations">
    <div class="table header" role="rowgroup">
      <div class="row sticky" role="columnheader">Produkt</div>
      <div class="row sticky" role="columnheader">föreg. År</div>
      <div class="row sticky" role="columnheader">Totalt produkt</div>
      <div class="row" role="columnheader">v.1</div>
      <div class="row" role="columnheader">v.2</div>
      <div class="row" role="columnheader">v.3</div>
      <div class="row" role="columnheader">v.4</div>
      <div class="row" role="columnheader">v.5</div>
      <div class="row" role="columnheader">v.6</div>
      <div class="row" role="columnheader">v.7</div>
      <div class="row" role="columnheader">v.8</div>
      <div class="row" role="columnheader">v.9</div>
      <div class="row" role="columnheader">v.10</div>
      <div class="row" role="columnheader">v.11</div>
      <div class="row" role="columnheader">v.12</div>
    </div>
    <div class="table header" role="rowgroup">
      <div class="row sticky" role="columnheader">Totalt vecla</div>
      <div class="row sticky" role="columnheader"></div>
      <div class="row sticky" role="columnheader"></div>
      <div class="row" role="columnheader">100 000 SEK</div>
      <div class="row" role="columnheader"></div>
      <div class="row" role="columnheader">100 000 SEK</div>
      <div class="row" role="columnheader"></div>
      <div class="row" role="columnheader"></div>
      <div class="row" role="columnheader">100 000 SEK</div>
      <div class="row" role="columnheader">100 000 SEK</div>
      <div class="row" role="columnheader"></div>
      <div class="row" role="columnheader">100 000 SEK</div>
      <div class="row" role="columnheader"></div>
      <div class="row" role="columnheader"></div>
      <div class="row" role="columnheader">100 000 SEK</div>
    </div>
    <div class="table row" role="rowgroup">
      <div class="row sticky" role="columnheader">Produktnamn</div>
      <div class="row sticky" role="columnheader">100 000 SEK</div>
      <div class="row sticky" role="columnheader">50 000 SEK</div>
      <div class="row" role="columnheader"><input type="number" /></div>
      <div class="row" role="columnheader"><input type="number" /></div>
      <div class="row" role="columnheader"><input type="number" /></div>
      <div class="row" role="columnheader"><input type="number" /></div>
      <div class="row" role="columnheader"><input type="number" /></div>
      <div class="row" role="columnheader"><input type="number" /></div>
      <div class="row" role="columnheader"><input type="number" /></div>
      <div class="row" role="columnheader"><input type="number" /></div>
      <div class="row" role="columnheader"><input type="number" /></div>
      <div class="row" role="columnheader"><input type="number" /></div>
      <div class="row" role="columnheader"><input type="number" /></div>
      <div class="row" role="columnheader"><input type="number" /></div>
    </div>
    <div class="table row" role="rowgroup">
      <div class="row sticky" role="columnheader">Produktnamn</div>
      <div class="row sticky" role="columnheader">100 000 SEK</div>
      <div class="row sticky" role="columnheader">50 000 SEK</div>
      <div class="row" role="columnheader"><input type="number" /></div>
      <div class="row" role="columnheader"><input type="number" /></div>
      <div class="row" role="columnheader"><input type="number" /></div>
      <div class="row" role="columnheader"><input type="number" /></div>
      <div class="row" role="columnheader"><input type="number" /></div>
      <div class="row" role="columnheader"><input type="number" /></div>
      <div class="row" role="columnheader"><input type="number" /></div>
      <div class="row" role="columnheader"><input type="number" /></div>
      <div class="row" role="columnheader"><input type="number" /></div>
      <div class="row" role="columnheader"><input type="number" /></div>
      <div class="row" role="columnheader"><input type="number" /></div>
      <div class="row" role="columnheader"><input type="number" /></div>
    </div>
    <div class="table row" role="rowgroup">
      <div class="row sticky" role="columnheader">Produktnamn</div>
      <div class="row sticky" role="columnheader">100 000 SEK</div>
      <div class="row sticky" role="columnheader">50 000 SEK</div>
      <div class="row" role="columnheader"><input type="number" /></div>
      <div class="row" role="columnheader"><input type="number" /></div>
      <div class="row" role="columnheader"><input type="number" /></div>
      <div class="row" role="columnheader"><input type="number" /></div>
      <div class="row" role="columnheader"><input type="number" /></div>
      <div class="row" role="columnheader"><input type="number" /></div>
      <div class="row" role="columnheader"><input type="number" /></div>
      <div class="row" role="columnheader"><input type="number" /></div>
      <div class="row" role="columnheader"><input type="number" /></div>
      <div class="row" role="columnheader"><input type="number" /></div>
      <div class="row" role="columnheader"><input type="number" /></div>
      <div class="row" role="columnheader"><input type="number" /></div>
    </div>
    <div class="table row">
      <div class="row sticky" role="columnheader">Produktnamn</div>
      <div class="row sticky" role="columnheader">100 000 SEK</div>
      <div class="row sticky" role="columnheader">50 000 SEK</div>
      <div class="row" role="columnheader"><input type="number" /></div>
      <div class="row" role="columnheader"><input type="number" /></div>
      <div class="row" role="columnheader"><input type="number" /></div>
      <div class="row" role="columnheader"><input type="number" /></div>
      <div class="row" role="columnheader"><input type="number" /></div>
      <div class="row" role="columnheader"><input type="number" /></div>
      <div class="row" role="columnheader"><input type="number" /></div>
      <div class="row" role="columnheader"><input type="number" /></div>
      <div class="row" role="columnheader"><input type="number" /></div>
      <div class="row" role="columnheader"><input type="number" /></div>
      <div class="row" role="columnheader"><input type="number" /></div>
      <div class="row" role="columnheader"><input type="number" /></div>
    </div>
    <div class="table row">
      <div class="row sticky" role="columnheader">Produktnamn</div>
      <div class="row sticky" role="columnheader">100 000 SEK</div>
      <div class="row sticky" role="columnheader">50 000 SEK</div>
      <div class="row" role="columnheader"><input type="number" /></div>
      <div class="row" role="columnheader"><input type="number" /></div>
      <div class="row" role="columnheader"><input type="number" /></div>
      <div class="row" role="columnheader"><input type="number" /></div>
      <div class="row" role="columnheader"><input type="number" /></div>
      <div class="row" role="columnheader"><input type="number" /></div>
      <div class="row" role="columnheader"><input type="number" /></div>
      <div class="row" role="columnheader"><input type="number" /></div>
      <div class="row" role="columnheader"><input type="number" /></div>
      <div class="row" role="columnheader"><input type="number" /></div>
      <div class="row" role="columnheader"><input type="number" /></div>
      <div class="row" role="columnheader"><input type="number" /></div>
    </div>
    <div class="table row">
      <div class="row sticky" role="columnheader">Produktnamn</div>
      <div class="row sticky" role="columnheader">100 000 SEK</div>
      <div class="row sticky" role="columnheader">50 000 SEK</div>
      <div class="row" role="columnheader"><input type="number" /></div>
      <div class="row" role="columnheader"><input type="number" /></div>
      <div class="row" role="columnheader"><input type="number" /></div>
      <div class="row" role="columnheader"><input type="number" /></div>
      <div class="row" role="columnheader"><input type="number" /></div>
      <div class="row" role="columnheader"><input type="number" /></div>
      <div class="row" role="columnheader"><input type="number" /></div>
      <div class="row" role="columnheader"><input type="number" /></div>
      <div class="row" role="columnheader"><input type="number" /></div>
      <div class="row" role="columnheader"><input type="number" /></div>
      <div class="row" role="columnheader"><input type="number" /></div>
      <div class="row" role="columnheader"><input type="number" /></div>
    </div>

    <div class="table row">
      <div class="row sticky" role="columnheader">Produktnamn</div>
      <div class="row sticky" role="columnheader">100 000 SEK</div>
      <div class="row sticky" role="columnheader">50 000 SEK</div>
      <div class="row" role="columnheader"><input type="number" /></div>
      <div class="row" role="columnheader"><input type="number" /></div>
      <div class="row" role="columnheader"><input type="number" /></div>
      <div class="row" role="columnheader"><input type="number" /></div>
      <div class="row" role="columnheader"><input type="number" /></div>
      <div class="row" role="columnheader"><input type="number" /></div>
      <div class="row" role="columnheader"><input type="number" /></div>
      <div class="row" role="columnheader"><input type="number" /></div>
      <div class="row" role="columnheader"><input type="number" /></div>
      <div class="row" role="columnheader"><input type="number" /></div>
      <div class="row" role="columnheader"><input type="number" /></div>
      <div class="row" role="columnheader"><input type="number" /></div>
    </div>

    <div class="table row">
      <div class="row sticky" role="columnheader">Produktnamn</div>
      <div class="row sticky" role="columnheader">100 000 SEK</div>
      <div class="row sticky" role="columnheader">50 000 SEK</div>
      <div class="row" role="columnheader"><input type="number" /></div>
      <div class="row" role="columnheader"><input type="number" /></div>
      <div class="row" role="columnheader"><input type="number" /></div>
      <div class="row" role="columnheader"><input type="number" /></div>
      <div class="row" role="columnheader"><input type="number" /></div>
      <div class="row" role="columnheader"><input type="number" /></div>
      <div class="row" role="columnheader"><input type="number" /></div>
      <div class="row" role="columnheader"><input type="number" /></div>
      <div class="row" role="columnheader"><input type="number" /></div>
      <div class="row" role="columnheader"><input type="number" /></div>
      <div class="row" role="columnheader"><input type="number" /></div>
      <div class="row" role="columnheader"><input type="number" /></div>
    </div>

    <div class="table row">
      <div class="row sticky" role="columnheader">Produktnamn</div>
      <div class="row sticky" role="columnheader">100 000 SEK</div>
      <div class="row sticky" role="columnheader">50 000 SEK</div>
      <div class="row" role="columnheader"><input type="number" /></div>
      <div class="row" role="columnheader"><input type="number" /></div>
      <div class="row" role="columnheader"><input type="number" /></div>
      <div class="row" role="columnheader"><input type="number" /></div>
      <div class="row" role="columnheader"><input type="number" /></div>
      <div class="row" role="columnheader"><input type="number" /></div>
      <div class="row" role="columnheader"><input type="number" /></div>
      <div class="row" role="columnheader"><input type="number" /></div>
      <div class="row" role="columnheader"><input type="number" /></div>
      <div class="row" role="columnheader"><input type="number" /></div>
      <div class="row" role="columnheader"><input type="number" /></div>
      <div class="row" role="columnheader"><input type="number" /></div>
    </div>

    <div class="table row">
      <div class="row sticky" role="columnheader">Produktnamn</div>
      <div class="row sticky" role="columnheader">100 000 SEK</div>
      <div class="row sticky" role="columnheader">50 000 SEK</div>
      <div class="row" role="columnheader"><input type="number" /></div>
      <div class="row" role="columnheader"><input type="number" /></div>
      <div class="row" role="columnheader"><input type="number" /></div>
      <div class="row" role="columnheader"><input type="number" /></div>
      <div class="row" role="columnheader"><input type="number" /></div>
      <div class="row" role="columnheader"><input type="number" /></div>
      <div class="row" role="columnheader"><input type="number" /></div>
      <div class="row" role="columnheader"><input type="number" /></div>
      <div class="row" role="columnheader"><input type="number" /></div>
      <div class="row" role="columnheader"><input type="number" /></div>
      <div class="row" role="columnheader"><input type="number" /></div>
      <div class="row" role="columnheader"><input type="number" /></div>
    </div>

    <div class="table row">
      <div class="row sticky" role="columnheader">Produktnamn</div>
      <div class="row sticky" role="columnheader">100 000 SEK</div>
      <div class="row sticky" role="columnheader">50 000 SEK</div>
      <div class="row" role="columnheader"><input type="number" /></div>
      <div class="row" role="columnheader"><input type="number" /></div>
      <div class="row" role="columnheader"><input type="number" /></div>
      <div class="row" role="columnheader"><input type="number" /></div>
      <div class="row" role="columnheader"><input type="number" /></div>
      <div class="row" role="columnheader"><input type="number" /></div>
      <div class="row" role="columnheader"><input type="number" /></div>
      <div class="row" role="columnheader"><input type="number" /></div>
      <div class="row" role="columnheader"><input type="number" /></div>
      <div class="row" role="columnheader"><input type="number" /></div>
      <div class="row" role="columnheader"><input type="number" /></div>
      <div class="row" role="columnheader"><input type="number" /></div>
    </div>
  </div>

</div>

编辑

我编辑了代码段，因为我意识到如果将最大宽度放在.wrapper上而不是在.table-container上，然后将.table-container设置为width: auto;，则会在左侧显示更长的时间。它们仍然滚动到滚动末尾的左侧，并且两列彼此重叠。

Answer 1

我决定尝试将需要粘性的列包裹在div中，然后粘贴。然后我意识到，如果将.table-container的宽度设置为表中实际内容的宽度，则可以正常工作。