Адаптивная таблица

#javascript #jquery

Задача - немного упростить процесс работы с таблицами на мобильных устройствах. Простым
превращением таблицы в блок не обойтись, так как при наличии нескольких колонок будет
невозможным разобрать где какие значения отображаются.

Пример таблицы:



$('button').click(function() {
    $('.two-col-table td').css("display", 'block');
});
.two-col-table {
 width: 100%;
 margin: 30px 0;
 background: #fefefe;
 border-radius: 4px;
 border-collapse: collapse;
 font-size: .9em;
}
.two-col-table td {
 border: 1px solid #ccc;
 padding: 10px 12px;
}
.two-col-table td p {
 margin: 0;
}






Условия эксплуатации покрытия
Огнезащита
Антисептик



Наружные поверхности, не подверженные вымыванию, при переменной влажности и температуре
под воздействием солнечного излучения и ветра
5 лет
10 лет

 

Внутри неотапливаемых жилых и нежилых помещений
16 лет
25 лет



Наружные поверхности помещений, находящихся в условиях Крайнего Севера
3 лет
5 лет



Внутренние поверхности закрытых неотапливаемых помещений, находящихся в условиях
Крайнего Севера
5 лет
8 лет







Как можно заменить из примера, если задать .two-col-table td {display:block} все
ячейки перекинутся на новую строку и будет непонятно, какие данные видит пользователь,
так как заголовка вверху таблицы не будет.

Вопрос следующий, как можно раскидать заголовок по строкам таблицы? Чтоб по итогу
получить вот такой вид:



$('button').click(function() {
    $('.two-col-table td').css("display", 'block');
});
.two-col-table {
 width: 100%;
 margin: 30px 0;
 background: #fefefe;
 border-radius: 4px;
 border-collapse: collapse;
 font-size: .9em;
}
.two-col-table td {
 border: 1px solid #ccc;
 padding: 10px 12px;
}
.two-col-table td p {
 margin: 0;
}

.two-col-table span {
 display: block;
 color: grey
}
.two-col-table tr:first-child {
 display: none;
}






Условия эксплуатации покрытия
Огнезащита
Антисептик



Условия эксплуатации покрытия Наружные поверхности, не подверженные
вымыванию, при переменной влажности и температуре под воздействием солнечного излучения
и ветра
Огнезащита 5 лет
Антисептик 10 лет

 

Условия эксплуатации покрытия Внутри неотапливаемых жилых и нежилых
помещений
Огнезащита 16 лет
Антисептик 25 лет



Условия эксплуатации покрытия Наружные поверхности помещений, находящихся
в условиях Крайнего Севера
Огнезащита 3 лет
Антисептик 5 лет



Условия эксплуатации покрытия Внутренние поверхности закрытых неотапливаемых
помещений, находящихся в условиях Крайнего Севера
Огнезащита 5 лет
Антисептик 8 лет







Как собрать данные или закинуть в какой-то блок понятно, а вот как пройтись именно
в каждой ячейки по нужной колонке?

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

Ответы

Ответ 1

$(document).on('click', function() {
  $('tr:not(.first-tr)').each(function() {
    $(this).find('td').each(function() {
      $(this).prepend('' + $('tr.first-tr td').eq($(this).index()).text()
+ '')
    });
  });
});


$('button').click(function() {
    $('.two-col-table td').css("display", 'block');
});
.two-col-table {
 width: 100%;
 margin: 30px 0;
 background: #fefefe;
 border-radius: 4px;
 border-collapse: collapse;
 font-size: .9em;
}
.two-col-table td {
 border: 1px solid #ccc;
 padding: 10px 12px;
}
.two-col-table td p {
 margin: 0;
}
.grey-span {
    display: block;
    color: grey;
}






Условия эксплуатации покрытия
Огнезащита
Антисептик



Наружные поверхности, не подверженные вымыванию, при переменной влажности и температуре
под воздействием солнечного излучения и ветра
5 лет
10 лет

 

Внутри неотапливаемых жилых и нежилых помещений
16 лет
25 лет



Наружные поверхности помещений, находящихся в условиях Крайнего Севера
3 лет
5 лет



Внутренние поверхности закрытых неотапливаемых помещений, находящихся в условиях
Крайнего Севера
5 лет
8 лет







Не знаю, как подключить здесь jQuery. Добавил класс .first-tr (но лучше используйте
thead и tbody), и добавил класс .grey-span (не отрывайте руки :) ).

Click для примера - здесь любое событие.

$('tr.first-tr td').eq($(this).index()).text() - берем текст с первой tr, которая
по индексу такая же, как текущая.

На коленке и по-быстрому, надеюсь, смысл ясен :)