Добавление горизонтального скролла к таблице в HTML/CSS

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

Для реализации горизонтальной прокрутки таблицы в случае её переполнения вставьте элемент table в div с CSS-свойством overflow-x: auto. Таким образом, полоса прокрутки появляется лишь при превышении содержимым таблицы доступной ширины.

<div style="overflow-x: auto;">
  <table>
    <!-- Контент вашей таблицы -->
  </table>
</div>

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

Сохранение константной ширины столбцов

Важно обеспечить доступность данных в таблицах без ущерба их визуальному восприятию. В этом нам пригодятся CSS-настройки.

Как избежать сжатия колонок

Назначение свойства min-width для ячеек <th> и <td> предотвратит их чрезмерное сжатие, что особенно важно при небольшой ширине экрана.

th, td { 
  min-width: 200px; // Минимальная ширина столбца
}

Подробнее об этом расскажет наш спикер на видео

Неделимый текст

Для предотвращения переноса текста на новую строку используйте свойство white-space: nowrap;. Это поможет сохранить ваши данные в удобочитаемом виде.

th, td { 
  white-space: nowrap; // Сохранение строки текста неделимой
}

Стилизация элементов таблицы

Не оставляйте без внимания визуальное оформление контейнера с прокруткой. Правильное использование отступов, размера шрифта и насыщенной границы значительно улучшило внешний вид вашей таблицы.

th, td {
  padding: 8px; // Отступы для лучшего восприятия текста
  font-size: 16px; // Размер шрифта
}

.scroll-container {
  border: 2px solid red; // Яркая граница для привлечения внимания
}

Умение управления переполнением

Бывает неприятно сталкиваться с таблицей, из-за которой весь остальной контент страницы оказывается скрытым. Вот несколько подсказок, как справиться с этой проблемой.

Выбор раскладки таблицы

Одним из способов установить постоянную ширину в таблицах, является использование свойства table-layout: fixed;. А если вам требуется, чтобы размер колонок был адаптирован к содержимому, выберите table-layout: auto;.

table {
  table-layout: fixed; // Фиксированная ширина столбцов
}

Контроль за содержимым ячеек

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

th, td {
  overflow-y: auto; // Вертикальная прокрутка при необходимости
}

Оптимизация ширины

max-width: fit-content; позволит таблице идеально подстраиваться под размеры своего содержимого.

.scroll-container {
  max-width: fit-content; // Ширина контейнера соответствует содержимому
}

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

Представьте таблицу как поезд 🚂, а область просмотра – как железнодорожную станцию 💻. Строки таблицы – это вагоны, некоторые из которых могут выходить за пределы станции.

Вид станции 💻: [🚂🚃🚃🚃]

Когда вы делаете таблицу с горизонтальной прокруткой, это можно представить как добавление путей для поезда:

В исходном положении:        [🚂🚃🚃🚃 | 🚃🚃🚃🚃 ]
После прокрутки вправо  ➡️: [🚃🚃🚃🚃 | 🚃🚃🚃🏁 ]

Таким образом, аналогично прогулке по платформе, пользователи получают возможность просмотреть всю реализованную в таблице информацию.

Практические советы для реального использования

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

Художественный дизайн полос прокрутки

С помощью CSS можно стилизовать полосы прокрутки, сделав их более приятными для глаза.

/* Настройки для браузеров Chrome/Safari */
.scroll-container::-webkit-scrollbar {
  height: 12px; // Визуальная компактность
}

.scroll-container::-webkit-scrollbar-thumb {
  background-color: darkgrey; // Элегантный цвет
  border-radius: 10px; // Скруглённые углы
}

Доступность – приоритет №1

Обеспечьте доступность таблицы: навигация с клавиатуры, ARIA-роли и визуально выделенный фокус.

.scroll-container {
  outline: none;  
}

.scroll-container[tabindex='0']:focus {
  box-shadow: inset 0 0 0 2px #5b9dd9; // Синяя тень для выделения
}

Адаптивность – обязательное условие

С помощью медиа-запросов можно адаптировать таблицу под разные размеры экранов, так чтобы она корректно отображалась на любых устройствах.

@media screen and (max-width: 768px) {
  th, td { 
    min-width: 150px; // Минимальная ширина ячеек для мобильных устройств
  }
}

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

1. The CSS Overflow Property | CSS-Tricks — Полное руководство по свойству overflow в CSS.
2. overflow-x – CSS: Cascading Style Sheets | MDN — Статья на MDN, объеденяющая все аспекты горизонтальной прокрутки.
3. How To Create a Horizontal Scrolling Menu | W3Schools — Инструкция по созданию горизонтального скроллящегося меню, похожего на таблицы.
4. How to create a horizontal scrolling table – Stack Overflow — Пример из сообщества о том, как реализовать горизонтальную прокрутку в таблицах.
5. php – MYSQL NOT IN array – Stack Overflow — Обсуждение вопроса видимости полосы прокрутки и переполнения таблиц.