Как сделать адаптивную таблицу css

Чтобы создать адаптивную таблицу в CSS, можно использовать несколько подходов в зависимости от ваших потребностей.

1. Использование медиа-запросов для изменения стилей таблицы:

Пример CSS кода:

table {
  width: 100%;
  border-collapse: collapse;
}

td, th {
  border: 1px solid #ddd;
  padding: 8px;
}

@media screen and (max-width: 600px) {
  /* изменяем стили таблицы для маленьких экранов */
  table, tbody, tr, td, th {
    display: block;
    width: auto;
  }

  td {
    /* стилизуем ячейки таблицы */
    border: none;
    position: relative;
    padding-left: 50%;
  }

  td:before {
    /* добавляем содержимое перед ячейкой */
    position: absolute;
    left: 6px;
    content: attr(data-label);
    text-align: left;
    font-weight: bold;
  }

}

В этом примере мы создаем простую таблицу и устанавливаем ее ширину на 100% и свойство border-collapse: collapse;, чтобы убрать отступы между ячейками.

Далее мы добавляем стили для ячеек (td) и заголовков (th). В этом примере мы указываем рамки ячеек и добавляем небольшой отступ на их содержимое.

Затем мы используем медиа-запрос для изменения стилей таблицы для маленьких экранов (меньше 600 пикселей). Мы устанавливаем свойство display: block; для всех элементов таблицы, чтобы они выровнялись по левому краю. Затем мы устанавливаем ячейки (td) на position: relative; и устанавливаем отступ слева (padding-left) на 50%. Это позволит создать эффект двух колонок.

Для того чтобы добавить ярлык к ячейкам, мы используем псевдоэлемент :before и указываем свойство content: attr(data-label);. Это позволит отображать содержимое каждой ячейки как ярлык.

2. Использование фреймворков и библиотек:

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

• Bootstrap (https://getbootstrap.com/docs/5.0/content/tables/)
• Foundation (https://foundation.zurb.com/sites/docs/tables.html)
• DataTables (https://datatables.net/)

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