Как сверстать таблицу которая будет скролится по X на мобилках, но самый первый столбец будет стоять на месте?

Question

[godsplane]

codepen: https://codepen.io/poylar/pen/xxjBQgw
Пример:

То есть самый левыйй столбик таблицы все стоит на месте, а правые два при нехватке места начинают скролится в рамках всей таблицы.



Кто то делал такое?Мб есть рефы, подойдет решение на js

edit. Можно разделить на два блока это все да, но мне нужно флекс позицированирование. Чтобы каджая ячейка растягивалась вверх если в соседней больше контента.

Answer 1

[ProjectSoft]

Всё очень просто

<div class="table-wrapper">
  <div class="table">
    <div class="col indigo">
      <div class="item">Item</div>
      <div class="item">Item</div>
      <div class="item">Item</div>
      <div class="item">Item</div>
    </div>
    <!-- your code table --->
  </div>
</div>

/**
** your code css
**/
.col:first-child {
  position: sticky;
  z-index: 5;
  left: 0;
}
.table-wrapper {
  max-width: 100%;
  overflow-y: hidden;
  overflow-x: auto;
}

И не важно, что именно будет: блоками, таблицей... -- принцип тот же.

Comments

[godsplane]

Круто. Спасибо!

[godsplane]

А может вы знаете как быть если все строки в этой таблице должны быть равны самый большой строке.
Просто тут решения не столбиках

[ProjectSoft]

godsplane, вы выбрали сложный вариант.))) Делайте нормальной таблицей и берите за основу то, что я вам дал. К первому элементу в tr, т. е. th или td, применяете position: sticky; и таблицу обязательно в блок обернуть с

max-width: 100%; overflow-y: hidden; overflow-x: auto;

[godsplane]

ProjectSoft, спасибо!Попробую.