Table 使用 position:sticky 并显示：网格

Question

我正在尝试使用 display:grid 和 position: sticky 在 table-like 视图中显示数据以粘贴前两行 header 和每个后续行的前三列。

header 行正确粘贴，但行中的前三列只粘贴了一点点滚动，然后它们向左滚动。是什么导致了这种行为？这就是粘性在这种情况下应该发挥的作用吗？

: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>

编辑

我编辑了代码片段，因为我意识到如果我将 max-width 放在 .wrapper 而不是 .table-container 上，然后将 .table-container 设置为 width: auto;显示左列的时间更长。它们仍然在滚动末尾向左滚动，并且其中两列相互重叠。

Answer 1

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

设置宽度我使用 jquery。如果有更好的解决方案不必涉及 Javascrip，我将不胜感激。但下面是我自己得到的。

$(document).ready(function() {
  var scrollWidth = $(".wrapper")[0].scrollWidth;
  $(".table-container").css("width", scrollWidth + "px");
});

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

body {
  width: 100%;
}

.wrapper {
  font-family: sans-serif;
  font-size: 0.85rem;
  max-width: 800px;
  height: 300px;
  overflow: auto;
}

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

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

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

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

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

.table .column.sticky {
  position: sticky;
  background: #eee;
  left: 0;
}

input {
  width: 45px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">

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

</div>

Answer 2

让我们从 position:sticky 的工作原理开始。

当一个元素是粘性的时，它只是相对于它的父元素被粘住，这意味着如果父元素被滚动离开，粘性元素将跟随它。

演示

[scoll] {
  background: pink;
  white-space: nowrap;
  padding: 10px;
  overflow: auto;
}

[stickyElementsContainer]{
  background: orange;
  width:200px;
  padding: 10px;
}

[stuckElement] {
  background: red;
  position: sticky;
  left: 0;
}

[overflow]{
  width:2000px;
  height:1px;
}

<div scoll>
  <div stickyElementsContainer>
    <span stuckElement>stuck</span>
  </div>
  <div overflow></div>
</div>

现在我们明白了，当一个元素离开可见区域时，里面的粘性元素会跟着它走。

你的问题完全一样，当你滚动包装器时，行是滚动的，因此里面的粘性元素会跟随它。

但是我们可以清楚的看到行还是很宽的，这是怎么回事？

下面的Demo应该可以解释一下

[scrollable] {
  width: 300px;
  padding: 10px;
  background: red;
  border: 5px solid;
  overflow:auto;
}

[container] {
  white-space: nowrap;
  background: orange;
  padding: 10px;
}

<div scrollable>
  <div container>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
</div>

橙色 <div> 是你的行，它占据了可滚动容器的宽度，即使它的内容仍然很宽。

因为它是一个块级元素（默认为 display:block）并且它的宽度是 auto 意味着它将占用其父元素的宽度。

现在如果我们在其中放置一个粘性元素，猜猜会发生什么。

[scrollable] {
  width: 300px;
  padding: 10px;
  background: red;
  border: 5px solid;
  overflow: auto;
}

[container] {
  padding: 10px;
  white-space: nowrap;
  background: orange;
}

[stuck] {
  background: pink;
  position: sticky;
  left: 0;
}

<div scrollable>
  <div container>
    <span stuck>stuck</span> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
</div>

这是您代码中问题的说明，只需添加背景我们就可以看到问题

: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));
  background:orange;
}

.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>

解决方案 1

Set a width to our row matching the content.

在你的情况下你有一个 grid-template-columns: 200px repeat(14, var(--column-width));

从中我们可以推断出内容的宽度200px + (14 * var(--column-width))

: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));
  width:calc(200px + (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>

我不推荐这个，因为我们需要知道内容的宽度，而且它不那么灵活。

解决方案 2

Set a width to our row matching the content using min-content.

: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));
  width:min-content;
}

.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>

我还不推荐这个解决方案，烧烤还没有广泛使用 supported。

解决方案 3

Make our grid inline.

inline 关卡元素会扩大和缩小以适应其内容。

三者中最可行的解决方案。

: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;  Removed */
  display: inline-grid;  /* NEW */
  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>

注意：我不得不将行数降低到post答案。

Table 使用 position:sticky 并显示：网格

Table using position:sticky and display: grid

css

scroll

position

sticky

css-grid