Адаптивные таблицы

  alexei 16/10/2022 - 10:03

Здесь вы узнаете как сделать адаптивную таблицу.


Как сделать адаптивные таблицы

Адаптивные таблицы отображают горизонтальную полосу прокрутка, ели ширина экрана будет слишком маленькой, чтобы показать таблицу целиком. Измените размер окна браузера, чтобы увидеть эффект:

Имя Фамилия Очки Очки Очки Очки Очки Очки Очки Очки Очки Очки Очки Очки Очки Очки Очки
Джил Смит 50 50 50 50 50 50 50 50 50 50 50 50 50 50 50
Ева Джексон 94 94 94 94 94 94 94 94 94 94 94 94 94 94 94
Адам Джонсон 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67

Чтобы создать адаптивную таблицу, добавьте контейнерный элемент с CSS свойством overflow-x: auto вокруг элемента <table>:


<div style="overflow-x: auto;">
  <table>
    ...
  </table>
</div>