Фиксированная левая колонка в HTML-таблице: без скриптов

Быстрый ответ

Для создания HTML-таблицы с фиксированным левым столбцом и скроллируемым содержимым воспользуйтесь свойством CSS position: sticky. Поместите таблицу внутрь блока div, у которого задано свойство overflow-x: auto, чтобы обеспечить возможность горизонтальной прокрутки. У первого элемента th и td установите position: sticky; left: 0;, чтобы столбец оставался неподвижным. Вот пример:

<style>
  .scrollable {
    overflow-x: auto;
  }
  th, td {
    position: sticky;
    left: 0;
    background-color: white;
  }
</style>
<div class="scrollable">
  <table>
    <thead>
      <tr><th>Фиксированный</th><th>Скроллируемый</th></tr>
    </thead>
    <tbody>
      <tr><td>Столбец 1</td><td>Столбец 2</td></tr>
    </tbody>
  </table>
</div>

Не забудьте присвоить фон элементам position: sticky, чтобы при прокрутке они остались видимыми с содержимым таблицы на фоне. Этот ко д позволит вам создать стильные таблицы с фиксированным столбцом.

Достигаем максимума с position: sticky

CSS-свойство position: sticky объединяет функциональность position: relative и position: fixed. Оно действует как преданный питомец: следует за вами до достижения определённого места на экране, где "прилипает". Это отлично подходит для реализации дизайна таблиц со скроллируемым содержимым.

Борьба за ширину

У элементов со свойством position: sticky необходимо задать конкретную ширину, чтобы избежать некорректного отображения и конфликтов за пространство. Ширину ячеек таблицы следует управлять с помощью свойств min-width и max-width, чтобы обеспечить гибкость и адаптивность разметки.

Совместимость: игра на выживание

Свойство position: sticky поддерживается большинством браузеров, но, как и с командами в Git, вы не можете предполагать, что все браузеры реализуют его. В частности, IE 11 и предыдущие версии не поддерживают "липкое" позиционирование. Важно учитывать обратную совместимость.

Продвигаем стилистику до совершенства

Функциональная таблица – это отлично, но внешний облик тоже имеет значение. Не забывайте о границах и отступах фиксированных ячеек. Свойства border-collapse: separate и border-spacing: 0 помогут вам управлять визуальным оформлением границ ячеек.

Визуализация

Рассмотрим локомотив (🚂) в качестве VIP-вагона, который всегда на виду:

[🚂: VIP-вагон] – VIP-вагон всегда остается заметным, независимо от движения других вагонов!

Теперь представьте длинный поезд:

[🚂][🚃][🚃][🚃][🚃][🚃]...[🚃]

При прокрутке поезда вправо:

[🚂] ... [🚃][🚃][🚃][🚃]
# VIP-вагон (🚂) остается на месте, пока остальные вагоны уезжают!

В HTML-таблице фиксированный левый столбец действует как VIP-вагон, в то время как остальная часть таблицы скроллируется.

План Б: альтернативные решения для старых браузеров

Если браузер не поддерживает position: sticky, можно использовать комбинацию position: absolute и position: relative, при этом может потребоваться дополнительный JavaScript для синхронизации прокрутки разных частей таблицы.

Вспомогательные плагины

В некоторых случаях не обойтись без jQuery-плагинов. Решения, предложенные такими плагинами, как, например, плагин с сайта fixedheadertable.com, облегчают создание таблиц с фиксированными столбцами и заголовками. Помните, мы всегда держимся за успехи предшественников.

Полезные материалы

1. Фиксированные шаблоны таблиц | CSS-Tricks — полный обзор решений для генерации таблиц с фиксированными заголовками на CSS.
2. <table>: Элемент таблицы – HTML | MDN — глубокое исследование элемента <table> HTML.
3. css – Как построить HTML-таблицу с фиксированным левым столбцом и скроллируемым содержимым? – Stack Overflow — обсуждение сообщества на тему фиксированных столбцов в таблицах.
4. Пример в реальном времени на CodePen — пример таблицы с фиксированным заголовком и первым столбцом, доступной для тестирования.
5. Учебник | DigitalOcean — о создании адаптивных таблиц на pure CSS.
6. Могу ли я использовать...Таблицы поддержки для HTML5, CSS3 etc. — проверьте, поддерживает ли position: sticky ваш браузер.
7. Макеты дизайна таблиц в вебе — Smashing Magazine — обзор различных дизайнерских подходов к созданию таблиц, включая методы для скроллируемых таблиц.