Как сделать адаптивные таблицы в 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. Вадим 21 Окт 2015 Ответить

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

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

  3. Александр 1 Май 2017 Ответить

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

    1. Вадим 1 Май 2017 Ответить

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

      1. Александр 3 Май 2017 Ответить

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

  4. Андрей 2 Окт 2017 Ответить

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

    1. Вадим 3 Окт 2017 Ответить

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

  5. Дмитрий 3 Апр 2018 Ответить

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

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