Создание респонсивных таблиц с помощью css

В этой заметке мы рассмотрим, как можно использовать таблицы в респонсивных шаблонах и как мы можем сделать удобным использование таблиц на мобильных устройствах.

При создании респонсивных таблиц вы столкнетесь с множеством проблем:

• Слишком много колонок
• Слова вылазят за границы ячеек
• Ширина колонки становится слишком малой
• Если у вас много строк, при скроле вы не сможете видеть заголовки колонок

В этой заметке, надеюсь, мы исправим все эти проблемы путем использования респонсивного css-решения.

Для начала нам нужно создать таблицу, которую сможем использовать для теста респонсивности, как что дальше видим таблицу 5 самых популярных фильмов на IMDB.

<table>
  <thead>
  <tr>
    <th>Movie</th>
    <th>Release Date</th>
    <th>IMDB Rating</th>
    <th>Director</th>
    <th>Staring</th>
  </tr>
  </thead>
  <tr>
    <td data-title="Movie">The Shawshank Redemption</td>
    <td data-title="Release Date">1994</td>
    <td data-title="IMDB Rating">9.3/10</td>
    <td data-title="Director">Frank Darabont</td>
    <td data-title="Staring">Tim Robbins, Morgan Freeman, Bob Gunton</td>
  </tr>
  <tr>
    <td data-title="Movie">The Godfather</td>
    <td data-title="Release Date">1972</td>
    <td data-title="IMDB Rating">9.2/10</td>
    <td data-title="Director">Francis Ford Coppola</td>
    <td data-title="Staring">Marlon Brando, Al Pacino, James Caan</td>
  </tr>
  <tr>
    <td data-title="Movie">The Godfather: Part II</td>
    <td data-title="Release Date">1975</td>
    <td data-title="IMDB Rating">9/10</td>
    <td data-title="Director">Francis Ford Coppola</td>
    <td data-title="Staring">Al Pacino, Robert De Niro, Robert Duvall</td>
  </tr>
  <tr>
    <td data-title="Movie">The Dark Knight</td>
    <td data-title="Release Date">2008</td>
    <td data-title="IMDB Rating">9/10</td>
    <td data-title="Director">Christopher Nolan</td>
    <td data-title="Staring">Christian Bale, Heath Ledger, Aaron Eckhart</td>
  </tr>
  <tr>
    <td data-title="Movie">Schindler's List </td>
    <td data-title="Release Date">1993</td>
    <td data-title="IMDB Rating">8.9/10</td>
    <td data-title="Director">Steven Spielberg</td>
    <td data-title="Staring">Liam Neeson, Ralph Fiennes, Ben Kingsley</td>
  </tr>
</table>

Как вы могли заметить, это самая обычная таблица, за исключением того, что мы добавили атрибуты для ячеек, которые мы сможем использовать для заголовков ячеек, когда после добавления css таблица станет респонсивной. Это возможно, потому что в css у вас есть доступ до контента до и после элемента путем использования :before и :after псевдоклассов.

Если посмотрим на таблицу с мобильного устройства, то увидим что-то вроде этого:

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

Но с использование media query мы можем изменить стиль таблицы на мобильных устройствах таким образом:

Для начала, определим media query, для мобильных устройств.

@media screen and (max-width: 320px) 
{
    // Стиль таблицы на мобильном устройстве
}

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

table thead 
{
    display: none;
}

Поскольку мы размещаем ячейки друг под другом, нужно добавить разделитель между строками (контентом старых строк). Добавим свободное пространство и линию

table tr 
{
    margin-bottom: 10px;
    display: block;
    border-bottom: 2px solid #ddd;
}

Для размещения ячеек друг под другом, нам нужно сделать ячейки блочными (display: block;) и разместить текст по правой стороне. Слева будет место под заголовки.

table td 
{
    display: block;
    text-align: right;
    font-size: 13px;
    border-bottom: 1px dotted #ccc;
}

table td:last-child 
{
    border-bottom: 0;
}

Дальше добавим заголовки ячеек слева, использовав :before псевдокласс и контент дата атрибута data-title.

table td:before 
{
    content: attr(data-title);
    float: left;
    text-transform: uppercase;
    font-weight: bold;
}

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

@media screen and (max-width: 320px) 
{
    table thead {
      display: none;
    }

    table tr {
      margin-bottom: 10px;
      display: block;
      border-bottom: 2px solid #ddd;
    }

    table td {
      display: block;
      text-align: right;
      font-size: 13px;
      border-bottom: 1px dotted #ccc;
    }

    table td:last-child {
      border-bottom: 0;
    }

    table td:before {
      content: attr(data-title);
      float: left;
      text-transform: uppercase;
      font-weight: bold;
    }
}

Источник