Как сделать адаптивные таблицы в WordPress?

Обычные таблицы с текстом на странице, при уменьшении окна браузера начинают вылазить за приделы экрана, появляется горизонтальная полоса прокрутки, это выглядит некрасиво. Поэтому решил поискать решение, а решение такое, нужно добавить код в стили темы (ваша-дочерняя-тема/style.css)

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

Форматирование для мобильных устройств:

Когда ширина браузера будет меньше 600 горизонтальные ячейки станут друг под друга,
заголовки колонок пропадут thead {display: none;}, и заголовками станут ячейки первого рядка.

tbody tr:nth-of-type(2n) {background-color: #f7f7f7;}

@media screen and (max-width: 600px) {
table {width:100%;}
thead {display: none;}
tr:nth-of-type(2n) {background-color: inherit;}
tr td:first-child {background: #f0f0f0; font-weight:bold;font-size:1.1em;}
tbody td {display: block; text-align:center;}
tbody td:before {
  content: attr(data-th);
  display: block;
  text-align:center;
}
tbody tr:nth-of-type(2n) {
  background-color: #fff;
}
}

Эти css стили будут работать если у таблицы стандартная структура:

<table>
<thead>
<tr>
  <th></th>
  <th></th>
  <th></th>
</tr>
</thead>
<tbody>
<tr>
  <td></td>
  <td></td>
  <td></td>
</tr>
</tbody>
</table>

Решение на англ: http://exisweb.net/responsive-tables-in-wordpress
Пример таблицы №1: http://codepen.io/VadymVolos/pen/YNabgG/
Пример таблицы №2: https://codepen.io/dudleystorey/pen/Geprd

У этой записи 10 комментариев

  1. Полосатая таблица с помощью CSS (HTML, WordPress)

    Кому нужно, искал как сделать полосатую таблицу с помощью ксс, нашел, а потом часа три подгонял под вордпресс, чтоб в нем отображалась правильно. http://codepen.io/VadymVolos/pen/LpeXWx

  2. Подскажите, как можно применить данный код только для одной таблицы на сайте, а не для всех?

    1. Для нужной таблицы допишите класс, и потом в ксс коде допишите этот класс, чтоб стили срабатывали только для этого класса. Если нужно за оплату можем сделать.

      1. Спасибо, разобрался.

  3. Я попробовал это решение, не подходит для моей таблицы. Удалил из css. Кэш везде почистил где только можно. Но все равно оно каким то образом работает. Как убрать?

    1. Любой css код убирается путем его удаления. Если после удаления стили отображаются нужно искать причину. Или плагин для кеширования установлен, или не тот код удалили. Откройте консоль браузера и посмотрите свои css стили, там увидите с какого файла они подтягиваются.

  4. Спасибо огромное за код :)))

Добавить комментарий

Закрыть меню

Форма