Bootstrap snippet Резиновое отображение таблицы

Основная проблема правильного отображения таблица является ее квадратная форма.
Мы не можем сдать страницу без преобразования таблицы. Мы можем уменьшить шрифт, отступы, но если таблица широкая — этого будет недостаточно без преобразований.
Тексты можем сузить рисунки можно сжать, а вот с таблицами так не сделаешь.
Можно скрыть дублирующие столбцы с таблице, например, задав класс .hidden-xs на нужную колонку.
Существует одно очень элегантное решение преобразовать таблицу блочный вид это все колонки располагается в правой части заголовки в левой. Такое решение было придумано уже давно я лишь взялся слегка его модифицировать.
В данной версии

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

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

Просто поставьте таблице один из классов xs-no-table, sm-no-table или md-no-table

Обязательно выделите у таблицы шапку и тело thead tbody

И Обязательно пропишите каждой ячейке в теле таблицы атрибут заголовка data-title=”Заголовок”

Все это работает без использования JS на всех современных браузерах

Рабочий пример

Понравилось? Забирайте

/*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;
  }
}