CSS → Горизонтальный скролинг таблицы с зафиксированной колонкой (sticky table column)

28.06.2024

Всё довольно просто — оборачиваем таблицу в div, делаем ему overflow-x:auto;, а зафиксированным ячейкам таблицы position:sticky; left:0;.

<div class="table-container">
  <table>
    <tbody>
      <tr>
        <th class="sticky-col">Col 1</th>
        <td>Col 2</td>
        <td>Col 3</td>
      </tr>
      ...
    </tbody>
  </table>
</div>

<style>
.table-container {
  overflow-x: auto;
}
.sticky-col {
  position: sticky;
  left: 0;
}
</style>

Демо

Похожие записи

Добавить комментарий