Адаптивные таблицы (responsive tables) с помощью CSS

При вёрстке сайтов необходимо всегда учитывать мобильные устройства, но проблема в том, что если в тексте встречаются таблицы, то он никак не хотят адекватно уменьшаться и ухудшают весь вид страницы, становясь то слишком длинными, то вылезая за границы экрана.
Решение есть - элегантный способ от Todd Parker, при котором таблица просто прячется, вместо неё показывается сообщение "Таблица: нажмите для увеличения", и при нажатии таблица раскрывается на полный экран, позволяя её более-менее сносно просмотривать. При нажатии кнопки "Назад" можно вернуться к текущему тексту.
Решение хорошо, но есть как всегда одно "но" - если вы хотите, чтобы таблица разворачивалась на всю страницу, а не просто внутри текста, то вам нужно вручную указать те классы и дивы, которые надо прятать, чтобы на экране оставалась лишь одна таблица. Это не очень удобно, но я в принципе остановился на том варианте, что при разворачивании таблицы она просто разворачивается внутри текста, а не на весь экран.
Итак, для того, чтобы это сделать, нужно лишь добавить этот css:

/* Делаем responsive таблицы */
 
@media screen and (max-width: 520px){
 
  html:not(.emp-sales) table th, 
  html:not(.emp-sales) table td {
    font-size: 0;
    padding: 0;
    content: "";
    height: 7px !important;
  }
  html:not(.emp-sales) table {
    position: relative; 
    overflow: hidden;
  }
  html:not(.emp-sales) table:before {
    content: "Таблица: нажмите для просмотра";
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.6);
    color: #fff;
    font-weight: bold;
    font-size: 1.6em;
    text-align: center;
    vertical-align: middle;
    z-index: 100;
    font-family: Helvetica, sans-serif;
 
  }
 html.emp-sales table:after {
    content: "";
    display: block;
    background: #333;
    padding: 10px;
  }
 
  html.emp-sales table:after{
    content: "Свернуть таблицу";
    position: relative;
    top: 0;
    left: 15px;
    padding: .5em 1em;
    margin: 10px 0;
    font-weight: bold;
    color: #fff;
    background: #000;
    border: 1px solid #fff;
  }
   /* around here we could use the HTML class to hide all other content on the page aside from the table */
  html.emp-sales p, html.emp-sales h1 {
    //display: none; 
  }
 
 }

а так же несколько строчек скрипта, который добавляет класс при клике на уменьшенную таблицу:

    jQuery(document).ready(function() {
      jQuery("table").click(function(){
        jQuery("html").toggleClass("emp-sales");
      });
    });

В друпале я в отдельном модуле добавляю этот код в хуке init, например так:

function mymodule_init() {
  drupal_add_js('
    jQuery(document).ready(function() {
      jQuery("table").click(function(){
        jQuery("html").toggleClass("emp-sales");
      });
    });
  ', 'inline');
}

Осталось только обновить страницу и кеш, и радоваться результату!
Удачи!

Comments

Евгений 08.03.2016 - 17:20

Действительно, вариант хороший. Но возникла некоторый момент в его работе: он также цепляет рекламу РСЯ, которая сверстана таблицами. Возможно, Вы бы могли подсказать решение, которое позволяет применить данный метод только к таблицам определенного класса?

Add new comment