Задача - немного упростить процесс работы с таблицами на мобильных устройствах. Простым превращением таблицы в блок не обойтись, так как при наличии нескольких колонок будет невозможным разобрать где какие значения отображаются.
Пример таблицы:
$('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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<button>Display block</button>
<table class="two-col-table">
<tbody>
<tr>
<td>Условия эксплуатации покрытия</td>
<td>Огнезащита</td>
<td>Антисептик</td>
</tr>
<tr>
<td>Наружные поверхности, не подверженные вымыванию, при переменной влажности и температуре под воздействием солнечного излучения и ветра</td>
<td>5 лет</td>
<td>10 лет</td>
</tr>
<tr>
<td>Внутри неотапливаемых жилых и нежилых помещений</td>
<td>16 лет</td>
<td>25 лет</td>
</tr>
<tr>
<td>Наружные поверхности помещений, находящихся в условиях Крайнего Севера</td>
<td>3 лет</td>
<td>5 лет</td>
</tr>
<tr>
<td>Внутренние поверхности закрытых неотапливаемых помещений, находящихся в условиях Крайнего Севера</td>
<td>5 лет</td>
<td>8 лет</td>
</tr>
</tbody>
</table>
Как можно заменить из примера, если задать .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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<button>Display block</button>
<table class="two-col-table">
<tbody>
<tr>
<td>Условия эксплуатации покрытия</td>
<td>Огнезащита</td>
<td>Антисептик</td>
</tr>
<tr>
<td><span>Условия эксплуатации покрытия</span> Наружные поверхности, не подверженные вымыванию, при переменной влажности и температуре под воздействием солнечного излучения и ветра</td>
<td><span>Огнезащита</span> 5 лет</td>
<td><span>Антисептик</span> 10 лет</td>
</tr>
<tr>
<td><span>Условия эксплуатации покрытия</span> Внутри неотапливаемых жилых и нежилых помещений</td>
<td><span>Огнезащита</span> 16 лет</td>
<td><span>Антисептик</span> 25 лет</td>
</tr>
<tr>
<td><span>Условия эксплуатации покрытия</span> Наружные поверхности помещений, находящихся в условиях Крайнего Севера</td>
<td><span>Огнезащита</span> 3 лет</td>
<td><span>Антисептик</span> 5 лет</td>
</tr>
<tr>
<td><span>Условия эксплуатации покрытия</span> Внутренние поверхности закрытых неотапливаемых помещений, находящихся в условиях Крайнего Севера</td>
<td><span>Огнезащита</span> 5 лет</td>
<td><span>Антисептик</span> 8 лет</td>
</tr>
</tbody>
</table>
Как собрать данные или закинуть в какой-то блок понятно, а вот как пройтись именно в каждой ячейки по нужной колонке?
Возможно есть лучшие решения и кто-то поделится способом борьбы с таблицами на мобильных устройствах, кроме замены их на изображения или оборачивания в блок с прокруткой внутренней, чтоб было удобно пользовании и в отображении.