Как сделать адаптивные таблицы в 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. Дмитрий

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

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