Добро пожаловать в самую большую библиотеку wordpress-кода в рунете

Адаптивные таблицы

Miscellaneous · 22.05.2019 20:17

0 0 1523

Если вам нужно быстро, и используя минимальный код, добиться, чтобы ваши прекрасные таблицы хорошо смотрелись и на телефонах, то используйте данное решение. Оно состоит из стилей и javascript-кода. Суть: заголовки таблицы переносятся через псевдоэлементы в каждую соответствующую ячейку таблицы, а сама таблица вытягивается в одну колонку. Что еще замечательного: решение не требует подключения jQuery и других библиотек, то есть полная автономия. 

// css код. Таблице задается 100% ширина, скрывается шапка таблицы (первая строка). Для наглядности первой колонке таблицы задается фоновый цвет. Вывод заголовков столбцов делается чуть меньшим шрифтом для наглядности
<style>
@media screen and (max-width:780px) {
table{width:100%;}
thead th{display:none;}
tr:nth-of-type(2n){background-color:inherit;}
tr td:first-child{background:#f0f0f0;text-align:center;}
tbody td{display:block;text-align:center;}
tbody td:before{content:attr(data-th);display:block;text-align:center;font-size:70%;}
th, td, td:first-child{width:auto;text-align:center;}
}
</style>

// js код. Скрипт считывает все заголовки таблицы (ячейки в thead, поэтому наличие thead у таблицы обязательно!). И сохраняет их в массив. Дальше перебором значения массива расставляются в виде атрибутов data-th к каждой соответствующей ячейке тела таблицы (поэтому должно быть наличие tbody). И потом css-код выводит значение атрибутов в виде псевдоэлементов.

<script type="text/javascript">
var headertext = [];
var headers = document.querySelectorAll("thead");
var tablebody = document.querySelectorAll("tbody");
for(var i = 0; i < headers.length; i++) {
headertext[i]=[];
for (var j = 0, headrow; headrow = headers[i].rows[0].cells[j]; j++) {
var current = headrow;
headertext[i].push(current.textContent.replace(/\r?\n|\r/,""));
}
}
if (headers.length > 0) {
for (var h = 0, tbody; tbody = tablebody[h]; h++) {
for (var i = 0, row; row = tbody.rows[i]; i++) {
for (var j = 0, col; col = row.cells[j]; j++) {
col.setAttribute("data-th", headertext[h][j]);
}
}
}
}
</script>

Обсудить сниппет
romapad

romapad

присоединился
30.04.2016

  • 61 Добавлено
    Сниппетов
  • 2 Получено
    Лайков
  • 0 Comments Posted
Теги
Поделиться с друзьями