Однажды в тени звезд. Фантастика. (15 март 2025)

Сотрудники загадочного Института Психологии задумали перестроить сознание обитателей планеты, устранив границы «я» и «не-я», пока процессоры Общемирового Компьютерного Радиуса шептались в своих локальных сетях. Но что-то пошло не так — и голоса зазвучали вразнобой.

Подробнее...

Создаем адаптивную таблицу. Css trick

Aleksej
Автор темы
Не в сети
Модератор

Больше

5 года 11 мес. назад - 5 года 11 мес. назад #1 от Aleksej

Aleksej создал тему: Создаем адаптивную таблицу. Css trick

Прообраз доступен по ссылке , здесь же - интересная его модификация: Bootstrap snippet Резиновое отображение таблицы. Практически полностью цитирую описание и сам сниппет далее:

В данной версии:

Можно размещать на одной странице множество сжимаемых таблиц.

Пустые колонки таблицы не отображает в блочном виде, т. к. они там не нужны вовсе.

Очень длинные заголовки теперь не вылезают за экран и не загораживают текст.

При просмотре таблицы на очень узких устройствах - заголовок перемещается вверх и если в этом случае он не умещается на экран — в конце ставится многоточие

Заголовки прилегают к правой части блока что является более удобным для чтения данных.

Вдобавок возможно регулировать момент преобразование таблицы в блочной вид XS, SM, MD.

Футер также преобразуется в блочный вид

Code:

/*no more tables*/
@media only screen and (max-width: 767px) {
  table.xs-no-table,
  table.xs-no-table>tfoot,
  table.xs-no-table>tbody,
  table.xs-no-table>tbody>tr>th,table.xs-no-table>tbody>tr>td,table.xs-no-table>tbody>tr,
  table.xs-no-table>tfoot>tr>th,table.xs-no-table>tfoot>tr>td,table.xs-no-table>tfoot>tr {
  display: block;
  }
  
  table.xs-no-table>thead>tr { display: none; }
  table.xs-no-table>tbody>tr,table.xs-no-table>tfoot>tr { border: 1px solid #ccc; }
  table.xs-no-table>tbody>tr>td,table.xs-no-table>tfoot>tr>td {
  border: none;
  border-bottom: 1px solid #eee;
  position: relative;
  white-space: normal;
  text-align:left;
  padding-left: 50%;
  }
  
  table.xs-no-table>tbody>tr>td:before,table.xs-no-table>tfoot>tr>td:before {
  white-space: nowrap;
  font-weight: bold;
  content: attr(data-title);
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;

  display: block;
  position: absolute;
  top: 6px;
  left: 6px;
  width: 45%;
  padding-left: 0px;
  text-align:right;
  }
  table.xs-no-table>tbody>tr>td:empty,table.xs-no-table>tfoot>tr>td:empty {
  display: none;
  }
}
@media only screen and (max-width: 991px) {
  table.sm-no-table,
  table.sm-no-table>tfoot,
  table.sm-no-table>tbody,
  table.sm-no-table>tbody>tr>th,table.sm-no-table>tbody>tr>td,table.sm-no-table>tbody>tr,
  table.sm-no-table>tfoot>tr>th,table.sm-no-table>tfoot>tr>td,table.sm-no-table>tfoot>tr {
  display: block;
  }
  
  table.sm-no-table>thead>tr { display: none; }
  table.sm-no-table>tbody>tr,table.sm-no-table>tfoot>tr { border: 1px solid #ccc; }
  table.sm-no-table>tbody>tr>td,table.sm-no-table>tfoot>tr>td {
  border: none;
  border-bottom: 1px solid #eee;
  position: relative;
  white-space: normal;
  text-align:left;
  padding-left: 50%;
  }
  
  table.sm-no-table>tbody>tr>td:before,table.sm-no-table>tfoot>tr>td:before {
  white-space: nowrap;
  font-weight: bold;
  content: attr(data-title);
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;

  display: block;
  position: absolute;
  top: 6px;
  left: 6px;
  width: 45%;
  padding-left: 0px;
  text-align:right;
  }
  table.sm-no-table>tbody>tr>td:empty,table.sm-no-table>tfoot>tr>td:empty {
  display: none;
  }
}
@media only screen and (max-width: 1199px) {
  table.md-no-table,
  table.md-no-table>tfoot,
  table.md-no-table>tbody,
  table.md-no-table>tbody>tr>th,table.md-no-table>tbody>tr>td,table.md-no-table>tbody>tr,
  table.md-no-table>tfoot>tr>th,table.md-no-table>tfoot>tr>td,table.md-no-table>tfoot>tr {
  display: block;
  }
  
  table.md-no-table>thead>tr { display: none; }
  table.md-no-table>tbody>tr,table.md-no-table>tfoot>tr { border: 1px solid #ccc; }
  table.md-no-table>tbody>tr>td,table.md-no-table>tfoot>tr>td {
  border: none;
  border-bottom: 1px solid #eee;
  position: relative;
  white-space: normal;
  text-align:left;
  padding-left: 50%;
  }
  
  table.md-no-table>tbody>tr>td:before,table.md-no-table>tfoot>tr>td:before {
  white-space: nowrap;
  font-weight: bold;
  content: attr(data-title);
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;

  display: block;
  position: absolute;
  top: 6px;
  left: 6px;
  width: 45%;
  padding-left: 0px;
  text-align:right;
  }
  table.md-no-table>tbody>tr>td:empty,table.md-no-table>tfoot>tr>td:empty {
  display: none;
  }
}
@media only screen and (max-width: 330px) { /*xxs*/
  table.md-no-table>tbody>tr>td:before,table.md-no-table>tfoot>tr>td:before,
  table.sm-no-table>tbody>tr>td:before,table.sm-no-table>tfoot>tr>td:before,
  table.xs-no-table>tbody>tr>td:before,table.xs-no-table>tfoot>tr>td:before {
  position: static;
  text-align:left;
  width: 100%;
  }
  table.md-no-table>tbody>tr>td,table.md-no-table>tfoot>tr>td,
  table.sm-no-table>tbody>tr>td,table.sm-no-table>tfoot>tr>td,
  table.xs-no-table>tbody>tr>td,table.xs-no-table>tfoot>tr>td{
  padding-left: 5px;
  }
}

Просто поставьте таблице один из классов: xs-no-table, sm-no-table или md-no-table.
Обязательно выделите у таблицы шапку и тело thead tbody
И Обязательно пропишите каждой ячейке в теле таблицы атрибут заголовка data-title=”Заголовок”
Все это работает без использования JS на всех современных браузерах

Последнее редактирование: 5 года 11 мес. назад пользователем Aleksej.

Пожалуйста Войти или Регистрация, чтобы присоединиться к беседе.

Работает на Kunena форум