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

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

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

  • Можно размещать на одной странице множество сжимаемых таблиц.
  • Пустые колонки таблицы не отображает в блочном виде, т. к. они там не нужны вовсе.
  • Очень длинные заголовки теперь не вылезают за экран и не загораживают текст.
  • При просмотре таблицы на очень узких устройствах - заголовок перемещается вверх и если в этом случае он не умещается на экран — в конце ставится многоточие
  • Заголовки прилегают к правой части блока что является более удобным для чтения данных.
  • Вдобавок возможно регулировать момент преобразование таблицы в блочной вид XS, SM, MD.
  • Футер также преобразуется в блочный вид


/*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 на всех современных браузерах

Последнее редактирование: 3 нед. 14 ч. назад пользователем Aleksej.

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