Таблица с использованием позиции: липкая и отображение: сетка - PullRequest
Новая
       89

Таблица с использованием позиции: липкая и отображение: сетка

0 голосов
/ 04 мая 2020

Я пытаюсь отобразить данные в табличном виде, используя display: grid и position: sticky для прикрепления первых двух строк заголовка и первых трех столбцов в каждой последующей строке.

Строки заголовка stick правильно, первые три столбца в строках, однако, придерживаются только небольшую часть прокрутки, а затем прокручиваются влево. Что вызывает это поведение? Это как липкая должна работать в этом сценарии? 

: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;, он показывает левые столбцы дольше. Они по-прежнему прокручиваются влево в конце прокрутки, а два столбца обернуты друг в друга.

Ответы [ 2 ]

1 голос
/ 04 мая 2020

Давайте начнем с того, как работает 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>

Теперь мы понимаем, что когда элемент выходит из видимой области, липкий элемент внутри него будет следовать за ним.

Ваша проблема точно такая же: когда вы прокручиваете оболочку, строка прокручивается, поэтому липкие элементы внутри нее следуют.

Но мы можем ясно видеть, что строка все еще широкая, Что такое происходит?

Следующая демоверсия должна объяснить 

[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 означает, что он будет принимать ширину его родителя.

Теперь Если мы поместим туда липкий элемент int, Угадайте что будет . 

[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

Установите ширину нашей строки, соответствующую содержимому.

В вашем случае у вас есть 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

Установите ширину для нашей строки, соответствующую содержимому, используя 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>

Я бы пока не рекомендовал это решение, Барбекю не очень широко пока поддерживается .

Решение 3

Сделайте нашу сетку встроенной.

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>

Примечание: Мне пришлось уменьшить число строк, чтобы опубликовать ответ.

1 голос
/ 04 мая 2020

Я решил попробовать обернуть столбцы, которые должны были быть липкими, в div и прикрепить их вместо этого. Затем я понял, что, если я установлю ширину .table-container равной ширине фактического содержимого в таблице, все будет работать нормально.

Чтобы установить ширину, я использую 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>
...