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

308

01 июня 2017, 09:31

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

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

$('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>

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

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

Answer 1

$(document).on('click', function() { 
  $('tr:not(.first-tr)').each(function() { 
    $(this).find('td').each(function() { 
      $(this).prepend('<span class="grey-span">' + $('tr.first-tr td').eq($(this).index()).text() + '</span>') 
    }); 
  }); 
}); 
 
 
$('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; 
}

<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 class="first-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>

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

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

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

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