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

Задача - немного упростить процесс работы с таблицами на мобильных устройствах. Простым превращением таблицы в блок не обойтись, так как при наличии нескольких колонок будет невозможным разобрать где какие значения отображаются.
Пример таблицы:
$('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 лет

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

Ответ

$(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, которая по индексу такая же, как текущая.
На коленке и по-быстрому, надеюсь, смысл ясен :)