Адаптивные таблицы css: Адаптивная таблица на чистом CSS – Адаптивная таблица на CSS

Leave a Comment / Адаптив / By /

Адаптивная таблица для мобильных устройств

Вы здесь: Главная — CSS — CSS3 — Адаптивная таблица для мобильных устройств

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

Однако появление горизонтальной полосы прокрутки на маленьких экранах мобильных устройств, приведет пользователя в бешенство. Неужели никак нельзя избежать полосы прокрутки? Можно! И я сейчас покажу вам, как это сделать.

HTML разметка

Для управления таблицей, мы обернули её в блок с классом container.

<div>
  <table>
    <thead>
    <tr>
      <th>Название услуги</th>
      <th>Сайт</th>
      <th>Сроки</th>
      <th>Количество страниц</th>
      <th>Стоимость</th>
    </tr>
    </thead>
    <tbody>
    <tr>
      <td data-label="Название услуги">Адаптация таблиц</td>
      <td data-label="Сайт">Лендинг</td>
      <td data-label="Сроки">5 дней</td>
      <td data-label="Количество страниц">1</td>
      <td data-label="Стоимость">1 000 руб</td>
    </tr>
    <tr>
      <td data-label="Название услуги">Адаптация таблиц</td>
      <td data-label="Сайт">Корпоративный сайт</td>
      <td data-label="Сроки">6 дней</td>
      <td data-label="Количество страниц">5</td>
      <td data-label="Стоимость">2 000 руб</td>
    </tr>
    <tr>
      <td data-label="Название услуги">Адаптация таблиц</td>
      <td data-label="Сайт">Интернет-магазин</td>
      <td data-label="Сроки">7 дней</td>
      <td data-label="Количество страниц">15</td>
      <td data-label="Стоимость">5 000 руб</td>
    </tr>
    </tbody>
  </table>
</div>

Атрибут data-label

Во всех ячейках таблицы добавлен атрибут data-label и в качестве передаваемого параметра — значения из шапки таблицы. В дальнейшем в каждую ячейку будут добавляться эти значения.

CSS правила


.container {
    min-width: 320px;
    max-width: 100%;
    padding: 0 15px;
    box-sizing: border-box;
}

table {
    border-collapse: collapse;
    width: 100%;
    margin: 20px 0;
}

table td, table th {
    padding: 10px;
    border: 1px solid #cbbdbd;
}

tr:nth-child(even){
    background-color: #f0f4c3
}

Адаптируем таблицу

При уменьшении размеров экрана, содержим

Простая адаптивная таблица — dr.Brain

Адаптивные таблицы — оказывается мы нуждаемся в них гораздо чаще, чем думаем. Обычно, когда есть необходимость создать таблицу для адаптивного сайта, мы делаем собственную разметку или обращаемся к уже существующим сторонним библиотекам. Не нужно этого делать. Полагаю, что обычных HTML таблиц и несложных свойств CSS будет достаточно.

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

Прием 1

Горизонтальный скролл

Нужно признаться, что такое решение точно не претендует на Нобелевскую премию (оно, вообще, ни на что не претендует), но оно работает. Это верный выбор при выводе в таблицу больших объемов данных. Нужно просто установить фиксированное значение для свойства min-width элемента table и для просмотра данных на мобильном устройстве пользователю придется делать горизонтальный скролл.

table{
    min-width: 800px; /* устанавливаем желаемую минимальную ширину экрана */
}

Пример на codepen.io:

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

Прием 2

Добавим гибкости

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

/* Ширина экрана до 800px будет относиться к мобильным устройствам*/
@media(max-width: 800px) {
        /* Скрываем заголовки таблицы*/
        table thead {
        left: -9999px;
        position: absolute;
        visibility: hidden;
    }
    table tr {
        border-bottom: 0;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        margin-bottom: 40px;
    }
    table td {
        border: 1px solid;
        margin: 0 -1px -1px 0; /* объединяем границы ячеек */
        width: 50%;
    }
}

Пример на codepen.io:

А вот и проблемы, как результат такого решения:

  1. Мы визуально скрываем столбец с заголовками thead, что в определенных случаях значительно затрудняет понимание содержимого таблицы,
  2. Макет такой таблицы не универсален и требует доработки, в зависимости от того, какие данные и в каком объеме представлены в таблице.

Манипуляции с заголовками носят сугубо индивидуальный харктер. Я могу предложить три варианта представления заголовков thead для мобильных устройств в таблице:

  1. заголовки можно скрыть,
  2. заголовки можно стилизовать, используя все тот же flexbox,
  3. заголовки можно перенести в span и поместить их в ячейки с данными.

Ниже приведены стили для вывода заголовков в дополнителыном элементе на мобильных устройствах:

/* Для настольных компьютеров скрываем span */
table td span {
    background: #eee;
    color: dimgrey;
    display: none;
    font-size: 10px;
    font-weight: bold;
    padding: 5px;
    position: absolute;
    text-transform: uppercase;
    top: 0;
    left: 0;
}

/* Стили для мобильных устройств */
@media(max-width: 800px) {
    table thead {
        left: -9999px;
        position: absolute;
        visibility: hidden;
    }
    table tr {
        border-bottom: 0;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        margin-bottom: 40px;
    }
    table td {
        border: 1px solid;
        margin: 0 -1px -1px 0;
        padding-top: 35px; /* дополнительный отступ, чтобы избежать наложения заголовка */
        position: relative;
        width: 50%;
    }
    /* Показываем span для мобильных устройств */
    table td span {
        display: block;
    }
}

Пример на codepen.io:

Зачем мне нужны таблицы?

Все очень просто: такой подход семантически верен.

Зачем использовать отвертку, когда нужен молоток. Конечно, вы можете сделать отвертку, похожую на молоток. Возможно, она даже будет работать почти как молоток. Но зачем все это? Просто возьми молоток и используй по назначению.

Спасибо за внимание.

Делаем простые адаптивные таблицы на минимальном CSS

Сложно представить сайт без таблиц. Существует вагон и маленькая тележка способов реализации адаптивного вывода таблиц. Можно использовать готовые фреймворки, разную экзотику на JS, но разумнее всего делать таблицы на CSS. На нем и рассмотрим парочку боевых примеров.

Кворк 3

Сразу отмечу, решение не мое, а известного канадского веб-разработчика Брэдли Таунта.

1. Разрешить скроллинг таблиц

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

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

table {
    min-width: 800px; /* Set your desired min-width here */
}

Получится так:

Многие этим и ограничиваются, но можно пойти дальше.

2. Добавить гибкости

В основе решения лежат флексбоксы со всеми вытекающими приятными последствиями.

/* Using 800px as mobile screen in this example */
@media(max-width: 800px) {
    /* Hide the table headings */
    table thead {
        left: -9999px;
        position: absolute;
        visibility: hidden;
    }
    table tr {
        border-bottom: 0;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        margin-bottom: 40px;
    }
    table td {
        border: 1px solid;
        margin: 0 -1px -1px 0; /* Removes double-borders */
        width: 50%;
    }
}

На выходе получаем такое:

В примере выше заголовки таблицы скрыты, чтобы не засорять ее. Но мы можем вывести и их. Например, так:

/* Default span styling - hidden on desktop */
table td span {
    background: #eee;
    color: dimgrey;
    display: none;
    font-size: 10px;
    font-weight: bold;
    padding: 5px;
    position: absolute;
    text-transform: uppercase;
    top: 0;
    left: 0;
}

/* Simple CSS for flexbox table on mobile */
@media(max-width: 800px) {
    table thead {
        left: -9999px;
        position: absolute;
        visibility: hidden;
    }
    table tr {
        border-bottom: 0;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        margin-bottom: 40px;
    }
    table td {
        border: 1px solid;
        margin: 0 -1px -1px 0;
        padding-top: 35px; /* additional padding to avoid heading overlap */
        position: relative;
        width: 50%;
    }
    /* Show the heading span */
    table td span {
        display: block;
    }
}

Как видим, способы сильно отличаются. И здесь важно понимать в контексте конкретного проекта, что использовать: молоток или отвертку.

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

Адаптивные таблицы сайта на чистом CSS

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

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

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

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

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

Приступаем к установке:

HTML

Код

<h2>Адаптивный стиль блока для сайта</h2>
<h4>Высота коробки остается неизменной, независимо от ее содержимого.</h4>
<section>
  <article>  
  <h3>Скрипты для uCoz</h3>
  <p>Первое описание </p>  
  </article>  
  <article>
  <h3>Шаблоны для uCoz</h3>
  <p>Второе краткое описание</p>
</article>
  <article>
  <h3>Всплывающие окна</h3>
  <p>Третье описание ив блоке</p>
</article>
</section>


CSS

Код

section {
  display: table;
  width: 80%;
  margin:0 auto;
}

article {
  display: table-cell;
  width: 31%;
  background-color: #185165;
  border: 18px solid #353333;
  color: #f3efef;
  padding: 15px;
  text-shadow: 0 1px 0 #292626;
}
h2{
  text-align:center;
  margin-top:20px;
  color:#FF9900;
}
h4{
  text-align:center;
  color:#CCC;
  font-weight:lighter;
}
p {
  line-height: 1.5em;
  color: #f8f9d5;
  text-shadow: 0 1px 0 #867e7e;
}

@media screen and (max-width:1200px){
  section{
  width:100%;
  }
  article {
  border:5px solid #424242;
  }
  h3{
  font-size: 1.2em;
  }
}

@media screen and (max-width:768px){

  article {
  display:block;
  width:80%;
  margin:0 auto;
  }
}


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

Не говоря про то, что теперь нужно иметь виду все мобильные гаджет, что эти элементы отлично отображаются.

Демонстрация

Новый подход к адаптивным таблицам

Geoff Yuen продемонстрировал очень эффективный способ создания адаптивных таблиц HTML. У этого примера было всего две небольших проблемы: код CSS был записан в Sass и в нем было много повторений и избыточность в использовании атрибута данных. Наше решение не имеет этих недостатков.

 

 

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

Основной код

Начнем с объяснения кода примера, созданного Geoff Yuen:

<table>
        <caption>The Films of Miyazaki</caption>
        <thead>
                <tr><th>Film<th>Year<th>Honor
        <tbody>
                <tr>
                        <td data-th="Film">My Neighbor Totoro
                        <td data-th="Year">1988
                        <td data-th="Honor">Blue Ribbon Award (Special)
                <tr>
                        <td data-th="Film">Princess Mononoke
                        <td data-th="Year">1997
                        <td data-th="Honor">Nebula Award (Best Script)
                <tr>
                        <td data-th="Film">Spirited Away
                        <td data-th="Year">2001
                        <td data-th="Honor">Academy Award (Best Animated Feature)
                <tr>
                        <td data-th="Film">Howl’s Moving Castle
                        <td data-th="Year">2004
                        <td data-th="Honor">Hollywood Film Festival (Animation OTY)
</table>

Обратите внимание на повторение атрибута данных и отражение подходящего заголовка содержимого в каждой ячейке таблицы.

Базовый код CSS этого примера:

table#miyazaki caption {
        font-size: 2rem;
        color: #444;
        margin: 1rem;
        background-image: url(miyazaki.png), url(miyazaki2.png);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center left, center right;
}
table#miyazaki {
        border-collapse: collapse;
        font-family: Agenda-Light;
        font-weight: 100;
        background: #333;
        color: #fff;
        text-rendering: optimizeLegibility;
        border-radius: 5px;
}
table#miyazaki thead th {
        font-weight: 600;
}
table#miyazaki thead th,
        table#miyazaki tbody td {
        padding: .8rem;
        font-size: 1.4rem;
}
table#miyazaki tbody td {
        padding: .8rem;
        font-size: 1.4rem;
        color: #444;
        background: #eee;
}
table#miyazaki tbody tr:not(:last-child) {
        border-top: 1px solid #ddd;
        border-bottom: 1px solid #ddd;
}

Код CSS для создания адаптивности таблицы — перехода в альтернативный режим:

@media screen and (max-width: 600px) {
        table#miyazaki caption {
                background-image: none;
        }
        table#miyazaki thead {
                display: none;
        }
        table#miyazaki tbody td {
                display: block;
                padding: .6rem;
        }
        table#miyazaki tbody tr td:first-child {
                background: #333;
                color: #fff;
        }
        table#miyazaki tbody td:before {
                content: attr(data-th);
                font-weight: bold;
                display: inline-block;
                width: 6rem;
        }
}

Запрос media прячет ячейки заголовков таблицы и показывает спрятанные значения атрибута data-th как подпись перед содержимым каждой ячейки таблицы на отдельной строке. Особый внешний вид задается первой ячейке каждой трансформированной строки, чтобы данные оставались визуально разделенными.

Автоматизируем результат

Этот код работает очень хорошо, как Вы можете увидеть, если измените размер окна браузера, чтобы его ширина стала менее 600 пикселей. Однако этот способ не очень масштабируемый: при добавлении новой строки нужно вручную вставлять атрибуты данных для каждой ячейки таблицы. Тогда как эта работа может быть сделана с помощью серверного языка программирования, такого как PHP, того же самого можно добиться и с помощью JavaScript, если Вы готовы пожертвовать некоторыми дополнительными возможностями.

Для начала упростим HTML код таблицы:

<table>
<caption>The Films of Hayao Miyazaki</caption>
<thead>
        <tr>
                <th>Film
                <th>Year
                <th>Honor
<tbody>
        <tr>
                <td>My Neighbor Totoro
                <td>1988
                <td>Blue Ribbon Award (Special)
        <tr>
                <td>Princess Mononoke
                <td>1997
                <td>Nebula Award (Best Script)
        <tr>
                <td>Spirited Away
                <td>2001
                <td>Academy Award (Best Animated Feature)
        <tr>
                <td>Howl’s Moving Castle
                <td>2004
                <td>Hollywood Film Festival (Animation OTY)
</table>

В конце документа добавим небольшой скрипт:

var headertext = [];
var headers = document.querySelectorAll("#miyazaki th"),
tablerows = document.querySelectorAll("#miyazaki th"),
tablebody = document.querySelector("#miyazaki tbody");
for(var i = 0; i < headers.length; i++) {
        var current = headers[i];
        headertext.push( current.textContent.replace( /\r?\n|\r/,"") );
}
for (var i = 0, row; row = tablebody.rows[i]; i++) {
        for (var j = 0, col; col = row.cells[j]; j++) {
                col.setAttribute("data-th", headertext[j]);
        }
}

Этот скрипт получает текстовое содержимое каждой ячейки заголовка и отбрасывает символы перевода строки и возврата каретки. После этого этот текст применяется как значение атрибута данных к подходящим ячейкам таблицы, получая те же результаты, что и код CSS выше. Функция setAttribute используется вместо dataset, так как последняя поддерживается только в браузере Internet Explorer версии 11.

Полученный результат по-прежнему доступен для слепых пользователей, вставляемый текст DOM читается, например, программой VoiceOver, хотя нужны дополнительные проверки.

Откройте наш пример в новом окне браузера и попробуйте изменить его размер:

Автор урока Dudley Storey

Перевод — Дежурка

Смотрите также:

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *