5 простых техник адаптивного дизайна в блоге студии Реймакс

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

Адаптивные изображения
Выравнивание изображений по центру является главным аспектом адаптивного дизайна. Код ниже позволяет показывать изображение на странице с учётом ширины колонки. Например, ширина колонки 600, изображения 1000 пикселей. На странице ширина изображения будет равна 600 пикселям. При изменении размеров окна браузера и соответственно ширины колонки, размер изображения будет меняться в меньшую или большую сторону.

img {
 max-width: 100%;
}

Адаптивное видео
В новой спецификации HTML5 у нас появилась возможность более простой вставки видео на страницы. А чтобы видео тоже подстраивалось под размер колонки достаточно добавить следующий код:

video {
max-width: 100%;
height: auto;
}

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

Вот правильная разметка для плеера:

<div>
   <iframe src="http://www.youtube.com/embed/jy3weRw5UJY" frameborder="0"></iframe>
</div>

Теперь осталось добавить css свойства:

.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px; height: 0; overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

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

Вот простой способ его создания. Для начала нам понадобится меню для основных дисплеев, его оформим в тег ul и select для мобильных устройств.

<nav>
<ul> 
<li><a href="/">Home</a></li> 
<li><a href="/collections/all">Books</a></li> 
<li><a href="/blogs/five-simple-steps-blog">Blog</a></li> 
<li><a href="/pages/about-us">About Us</a></li> 
<li><a href="/pages/support">Support</a></li> 
</ul>
<select> 
<option selected="selected">Select</option>
<option value="/">Home</option> 
<option value="/collections/all">Books</option> 
<option value="/blogs/five-simple-steps-blog">Blog</option> 
<option value="/pages/about-us">About Us</option> 
<option value="/pages/support">Support</option> 
</select>
</nav>

А ниже представлен код css. Мы скрываем тег select по умолчанию и показываем только тогда, когда разрешение экрана меньше 960 пикселей.

nav select {
display: none;
}
@media (max-width: 960px) {
nav ul     { display: none; }
nav select { display: inline-block; }
}

Адаптивные таблицы
Таблицы и адаптивный дизайн — не самое лучшее сочетание. Ниже представлен действительно полезный метод, чтобы помочь сделать таблицы более отзывчивыми.

<table>
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Job Title</th>
</tr>
</thead>
<tbody>
<tr>
<td>James</td>
<td>Matman</td>
<td>Chief Sandwich Eater</td>
</tr>
<tr>
<td>The</td>
<td>Tick</td>
<td>Crimefighter Sorta</td>
</tr>
</tbody>
</table>

/* 
Generic Styling, for Desktops/Laptops 
*/
table { 
width: 100%; 
border-collapse: collapse; 
}
/* Zebra striping */
tr:nth-of-type(odd) { 
background: #eee; 
}
th { 
background: #333; 
color: white; 
font-weight: bold; 
}
td, th { 
padding: 6px; 
border: 1px solid #ccc; 
text-align: left; 
}

Теперь у нас есть html разметка и базовые css стили. Давайте сделаем таблицы адаптивными. Для этого мы зададим отображение элементов таблицы как блоков.

@media 
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {
/* Force table to not be like tables anymore */
table, thead, tbody, th, td, tr { 
display: block; 
}
/* Hide table headers (but not display: none;, for accessibility) */
thead tr { 
position: absolute;
top: -9999px;
left: -9999px;
}
tr { border: 1px solid #ccc; }
td { 
/* Behave  like a "row" */
border: none;
border-bottom: 1px solid #eee; 
position: relative;
padding-left: 50%; 
}
td:before { 
/* Now like a table header */
position: absolute;
/* Top/left values mimic padding */
top: 6px;
left: 6px;
width: 45%; 
padding-right: 10px; 
white-space: nowrap;
}
/*
Label the data
*/
td:nth-of-type(1):before { content: "First Name"; }
td:nth-of-type(2):before { content: "Last Name"; }
td:nth-of-type(3):before { content: "Job Title"; }
td:nth-of-type(4):before { content: "Favorite Color"; }
td:nth-of-type(5):before { content: "Wars of Trek?"; }
td:nth-of-type(6):before { content: "Porn Name"; }
td:nth-of-type(7):before { content: "Date of Birth"; }
td:nth-of-type(8):before { content: "Dream Vacation City"; }
td:nth-of-type(9):before { content: "GPA"; }
td:nth-of-type(10):before { content: "Arbitrary Data"; }
}

Полностью адаптивные таблицы с использованием элементов определений терминов

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

Для примера рассмотрим таблицу совместимости браузеров. Структура в этом случае будет состоять не из разметки таблиц, а из списка определений:

<p>Browser support
<dl>
        <dt data-version="Chrome 12+"><img src="chrome.svg" alt="Chrome">
        <dd>Chrome 12+
        <dt data-version="Firefox 14+"><img src="firefox.svg" alt="Firefox">
        <dd>Safari 6+
        <dt data-version="Android 4+"><img src="android.svg" alt="Android">
        <dd>Android 4+
</dl>

Здесь теги <dt> используются как ячейки заголовка таблицы, а элементы <dd> — как ячейки содержимого таблицы. Обратите внимание, содержимое каждого объявления дублируется в значении атрибута данных для соответствующего термина определения. Атрибут данных записывается в свободной форме: можно использовать любой суффикс после data- и после его создания, атрибут может содержать любое значение.

Задаем код CSS

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

p.definition-table-caption {
        text-align: center;
        font-weight: bolder;
}
dl.definition-table {
        display: table;
}
dl.definition-table dt {
        font-weight: bolder;
        display: table-cell;
        text-align: center;
}
dl.definition-table dt img {
        margin: .5rem;
        width: 3rem;
}

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

dl.definition-table dd {
        display: none;
}
dl.definition-table dt:after {
        display: block;
        position: relative;
        content: attr(data-version);
        left: 0; top: 0;
}

Это создаст внешний вид таблицы без использования разметки таблицы.

Делаем таблицу адаптивной

При сужении окна браузера нам нужно изменить расположение таблицы, разместив информацию в горизонтальных строках. В подходящих точках перехода @media включим снова теги <dd>, зададим им всплытие вправо, отображая связанный термин слева, и отключим показ созданного содержимого:

@media screen and (max-width: 600px) {
        dl.definition-table dt:after {
                display: none;
        }
        dl.definition-table dd {
                display: block;
                float: right;
                margin-top: 1rem;
        }
        dl.definition-table dt {
                display: block;
                float: left;
                clear: left;
        }
        dl.definition-table dt img {
                vertical-align: middle;
        }
}

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

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

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

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

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

Html как сделать адаптивную таблицу

Адаптивная таблица на чистом CSS | Блог веб-разработчика MaxGraph

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

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

Первый способ адаптации

Стилизуем все это дело (главным образом нам нужно стилизовать table-wrap).

В результате, на ширине ДО 600 пикселей таблица будет скроллиться, а сайт нет. Удобно, но сегодня я хотел бы поговорить о другом. Я нашел еще один интересный подход к адаптивности таблицы. Он заключается в использовании data-атрибутов и псевдоклассов. Сейчас все покажу.

Второй способ адаптации

Для начала поменяем разметку:

Раздали каждому столбцу атрибут data-label, который нам пригодится в будущем.

Задаем базовые стили:

Выглядит, как обычная таблица, естественно, сдвигая сайт на 320-420 пикселях, мы увидим горизонтальный скролл всего сайта. Не дело.

Как это исправить? добавляем стили:

Здесь мы сделали строки таблицы блочными, удалили названия столбцов, а текст самих столбцов выровняли по правому краю. В свою очередь при помощи псевдокласса :before мы присоединяем к левому краю наши дата-атрибуты. Выходит так:

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

Надеюсь, Вам было интересно читать данную информацию. Если да — оцените ее! До скорых встреч)

Метки: css, HTML, responsive, table, адаптивность

Понравилось? Расскажи другим!

Адаптивные таблицы CSS, новый взгляд

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

Существующие способы сделать это:

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

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

Несколько методов совершенно в другом направлении:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Скрытие несущественных столбцов на небольших экранах

Вывод вместо этого миниатюры таблицы и отображение полной таблицы при нажатии на миниатюру

Отображение диаграммы на меньших экранах (например, круговая диаграмма)

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

Оба метода очень похожи: они устанавливают для элементов таблицы display: block;, так что они ведут себя как обычные элементы и дублируют содержимое thead двумя разными способами:

Использование text-shadow и создание только тени для каждой строки

Использование функции element() для дублирования thead, стилей и всего остального.

Каждый метод имеет свои плюсы и минусы, но следующие достоинства и недостатки присущи обоим:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Плюсы: работает с обычной разметкой таблиц

Минусы:

Все, кроме первого набора заголовков, не поддаются выбору (поскольку ни тени, ни изображения сгенерированные element() не являются реальным текстом). Однако имейте в виду, что методы, основанные на сгенерированном контенте, также имеют эту проблему — и для всех строк. Кроме того, экранные дикторы считывают их, как и обычную таблицу. В любом случае это довольно серьезный недостаток и его еще предстоит решить. Я с нетерпением жду возможности найти более жизнеспособные решения.

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

Использование text-shadow для копирования текста в другие строки

Дополнительные преимущества: Работает во всех браузерах

Дополнительные минусы: Max Number для строк нужно жестко указывать в CSS, так как каждой строке требуется еще одна тень текста для thead. Тем не менее, вы можете указать больше теней, чем необходимо, поскольку overflow: hidden для таблицы позволяет скрыть лишние тени. Кроме того, количество столбцов должно быть указано в CSS (переменная —cols).

Использование element(), чтобы скопировать весь в другие строки

Дополнительные минусы: element() в настоящее время поддерживается только в Firefox

Автор: Lea Verou

Источник: http://lea. verou.me/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Делаем таблицы HTML адаптивными

Helix.su — портал вебмастера > css > Делаем таблицы HTML адаптивными

Если Вы нашли ошибку в тексте, пожалуйста, выделите область и нажмите Ctrl + Enter.

Последняя версия jQuery:

Небольшое руководство по тому, как скачать самую актуальную версию библиотеки jQuery, а также рекомендации по подключению скрипта.

Популярное за неделю:

Шаблоны:

Подборки интерфейсов:

Таблицы с данными в адаптивном дизайне

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

Не очень удобно, правда? К счастью уже существует несколько хитрых способов решить такую проблему.

1. Способ от Chris Coyier

2. Способ от Zurb.com

3. Способ от Scott Jehl

4. Способ от Todd Parker

В этом способе таблица на маленьком экране просто прячется под «спойлер». Как говорится, дешево и сердито.

• css
• адаптивная вёрстка
• веб-дизайн
• адаптивный дизайн

таблиц адаптивных данных | CSS-уловки

Гаррет Даймон:

Таблицы данных не очень хорошо подходят для адаптивного дизайна. Просто говорю’.

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

Адаптивный дизайн — это адаптация дизайна к экранам разных размеров. Так что же происходит, когда экран уже минимальной ширины таблицы данных? Вы можете уменьшить масштаб и увидеть всю таблицу, но размер текста будет слишком маленьким для чтения. Или вы можете увеличить точку удобочитаемости, но для просмотра таблицы потребуется как вертикальная, так и (грустная) горизонтальная прокрутка.

Итак, вот что мы будем делать…

Мы собираемся использовать принципы «отзывчивого дизайна» (запросы CSS @media), чтобы определить, меньше ли экран, чем максимальная упругость нашей таблицы.Если да, то мы переформатируем таблицу.

Мы были хорошими маленькими разработчиками и использовали семантическую разметку Plain Ol ’для нашей таблицы. Голые кости пример:

  <таблица>


 Имя 
 Фамилия 
 Должность 




 Джеймс 
 Матман 
 Главный поедатель сэндвичей 


 
 Отметить 
 Сорта борцов с преступностью 


  

В нашем обычном CSS нет ничего особенного:

  / *
Универсальный стиль для настольных компьютеров / ноутбуков
* /
стол {
  ширина: 100%;
  граница-коллапс: коллапс;
}
/ * Полосатая зебра * /
tr: nth-of-type (odd) {
  фон: #eee;
}
th {
  фон: # 333;
  цвет белый;
  font-weight: жирный;
}
td, th {
  отступ: 6 пикселей;
  граница: 1px solid #ccc;
  выравнивание текста: слева;
}  

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

Самым большим изменением является то, что мы собираемся заставить таблицу не вести себя как таблица , установив каждый связанный с таблицей элемент на уровне блока. Затем, сохраняя полосатую зебру, которую мы изначально добавили, это похоже на то, как каждая строка таблицы становится таблицей сама по себе, но только размером с экран.Никакой горизонтальной прокрутки! Затем для каждой «ячейки» мы будем использовать содержимое, сгенерированное CSS (: до ), чтобы применить метку, чтобы мы знали, что означает каждый бит данных.

  / *
Максимальная ширина, прежде чем эта КОНКРЕТНАЯ таблица станет неприятной
Этот запрос будет действовать для любого экрана размером менее 760 пикселей. 
а также iPad в частности.
* /
@средства массовой информации
только экран и (max-width: 760px),
(min-device-width: 768px) и (max-device-width: 1024px) {

/ * Заставить таблицу больше не быть похожей на таблицы * /
table, thead, tbody, th, td, tr {
дисплей: блок;
}

/ * Скрыть заголовки таблицы (но не отображать: none; для удобства) * /
thead tr {
позиция: абсолютная;
верх: -9999 пикселей;
слева: -9999 пикселей;
}

tr {border: 1px solid #ccc; }

td {
/ * Вести себя как «рядок» * /
граница: нет;
нижняя граница: сплошной 1px #eee;
положение: относительное;
отступ слева: 50%;
}

td: before {
/ * Теперь как заголовок таблицы * /
позиция: абсолютная;
/ * Верхние / левые значения имитируют отступы * /
верх: 6 пикселей;
слева: 6 пикселей;
ширина: 45%;
отступ справа: 10 пикселей;
белое пространство: nowrap;
}

/ *
Обозначьте данные
* /
td: nth-of-type (1): before {content: "First Name"; }
td: nth-of-type (2): before {content: "Last Name"; }
td: nth-of-type (3): before {content: "Должность"; }
td: nth-of-type (4): before {content: "Favorite Color"; }
td: nth-of-type (5): before {content: "Wars of Trek?"; }
td: nth-of-type (6): before {content: "Secret Alias"; }
td: nth-of-type (7): before {content: "Date of Birth"; }
td: nth-of-type (8): before {content: "Dream Vacation City"; }
td: nth-of-type (9): before {content: "GPA"; }
td: nth-of-type (10): before {content: "Произвольные данные"; }
}  

Итак, настольные компьютеры получают обычную таблицу, а мобильные устройства (или другие маленькие экраны) — переформатированную и более удобную для изучения таблицу:

Эй, а как насчет IE?

IE 9 и более ранние не любят, когда вы устанавливаете элементы таблицы как display: block; Он делает странные вещи и работает неправильно. Но IE 9 поддерживает медиа-запросы . Итак, мое решение до сих пор — просто заключить стили медиа-запросов в условные комментарии.

   
<стиль>
   / * только медиазапросы, связанные с таблицами * /

/ * Или внешняя таблица стилей или что-то еще * /
  

Если проблема была , только , что старые версии IE не поддерживают медиа-запросы, мы могли бы использовать проект css3-mediaqueries-js (поддержка полифиллов для всех медиа-запросов) или ответ (также полифил, намного меньше, но только мин / макс ширина).Они оба работают очень хорошо. Но в данном случае это не наша проблема.

Все это отлично работает в IE 10, и IE 10 также игнорирует условные комментарии, поэтому стили будут работать, даже если они заключены в условные выражения! IE.

Посмотри

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

Посмотреть демо

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

Это не идеально…

Это лишь одно из возможных решений проблемы с таблицами данных на маленьких экранах. Это не идеально. Могут быть некоторые проблемы с доступностью (а может, и нет, я действительно не уверен). Вероятно, есть какие-то причудливые решения JavaScript, которые могут подходить к делу по-другому и при этом отлично работать. Если появятся другие решения этой проблемы, я буду обновлять эту страницу.

: Другие идеи

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

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

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

Посмотреть демо

Mobile Первая версия от Дерека Пенникаффа.

Версия, которая начинается с div, а метки генерируются псевдоэлементами и атрибутами данных Mobifreaks.

Просто спрячьте несущественные вещи, версия Стюарта Карри

Создавайте мобильные версии напрямую (без материала div) от Ханнеса Кирсмана на основе этого Gist (живая демонстрация).

Доступные, простые, адаптивные таблицы | CSS-уловки

Не существует единого решения, чтобы сделать любой

соответствующим образом отзывчивым. Вот что мне нравится в этой публикации Давиде Риццо: он признает это, а затем приступает к некоторым решениям. Это отличное дополнение к территории, по которой мы ступаем некоторое время.

Содержание и сравнительные таблицы

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

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

У нас все еще работает разметка таблиц?

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

Я провел несколько тестов с простой таблицей лучших практик. Используя несколько программ чтения с экрана (Chrome Vox и VoiceOver), я попытался сориентироваться в разметке:

1. ChromeVox сообщает вам, что вы находитесь в таблице, а VoiceOver также сообщает, сколько столбцов и строк в таблице (что полезно).
2. Ни CromeVox, ни VoiceOver не сообщают вам, когда вы находитесь в заголовке стола.

Не рекомендуемые способы создания адаптивной таблицы

Путем проб и экспериментов я отказался от этих методов:

1. Генерация второй более узкой таблицы с помощью JavaScript и попеременное скрытие / отображение по точке останова.
   Почему? Дублирование контента, не лучше, чем сайт «.m». Разбьет любые уникальные идентификаторы внутри таблицы. Плохая идея для компонентов, управляемых Styleguide.
2. Использование обычной разметки таблицы и JavaScript в точке останова для преобразования таблицы в адаптивную версию.
   Почему? Требуется разная разметка для вертикальных и горизонтальных таблиц. Нарушит любую инициализацию содержимого таблицы JS. Требуется множество прослушивателей событий JS и манипуляции с DOM.
3. Сохранение разметки таблицы, но переключение на отображение : flex для вертикального выравнивания содержимого таблицы.
   Почему? Невозможно выровнять ячейки по строкам с помощью оболочек типа

Адаптивные таблицы с flexbox

1a) Для таблиц с ориентированием по строкам…

• Упорядочивайте разметку точно так, как ее должно читать мобильное устройство или программа чтения с экрана, используйте семантические заголовки и контент.
• Отказаться от концепции оберток «строк».
• Задайте ширину каждой ячейки в процентах от количества столбцов или строк.
  Автоматическое изменение ширины столбцов невозможно.

См. Таблицы адаптивных действий пера (по строкам) CSS-Tricks (@ css-tricks) на CodePen.

1b) Для таблиц, ориентированных на столбцы…

• Задайте порядок гибкости по строкам, чтобы мгновенно создать вертикальный стол. Он должен быть встроенным, иначе нам понадобится уникальный класс для каждой строки. Довольно легко сделать вручную или очень легко применить на CMS или JavaScript.

См. Таблицы адаптивных действий пера (по столбцам) CSS-Tricks (@ css-tricks) на CodePen.

2) Стиль для облегчения соединения

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

См. Таблицы отклика пера (стили ячеек), написанные Давиде Риццо (@davidelrizzo) на CodePen.

3) Сворачивать в блоки на маленьких экранах

В медиа-запросе с маленьким экраном установите все на display: block . Это дает нам адаптивные таблицы!

См. «Таблицы, реагирующие на перо» (свернуть) от CSS-Tricks (@ css-tricks) на CodePen.

3b) Сворачивание на вкладки или гармошки

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

См. Адаптивные таблицы пера (вкладки и гармошки) от CSS-Tricks (@ css-tricks) на CodePen.

Другие улучшения

Вы можете использовать тот же стиль ячеек для других типов разметки

Даже стандартная разметка таблицы!

См. Таблицы адаптивных действий пера (альтернативная разметка) от CSS-Tricks (@ css-tricks) на CodePen.

Резервные копии для no-flexbox

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

  .no-flexbox .Rtable> .Rtable-cell {
  дисплей: блок;
}  

Заключение

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

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

Этот пост изначально был опубликован на CodePen.

Как создать адаптивную таблицу

Узнайте, как создать адаптивную таблицу.

Адаптивные таблицы

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

и даже scope = "row | col" , похоже, ничего не делают! Единственный способ заставить его распознать заголовок — заключить его в тег . Читатель проходит по таблице по строкам независимо от того, как организовано ваше содержимое. VoiceOver, по крайней мере, позволяет вам перемещаться в любом направлении с помощью клавиш со стрелками, но у вас по-прежнему нет указания, в каком порядке вы, , должны перемещаться, . По сути, ничто в разметке не сообщает пользователю программы чтения с экрана, следует ли читать содержимое через строки или столбцы.Самая значимая разметка по-прежнему исходит из нетабличного семантического содержания. Подходы к адаптивным таблицам Давайте подумаем о различных способах реагирования таблицы на : Squash : если столбцы имеют мало содержимого, они могут сжиматься по горизонтали без проблем на экране мобильного устройства, поэтому не меняет макет должен быть допустимым вариантом. Вертикальная прокрутка : если макет и контент точны и важны, пользователь может прокручивать влево или вправо.Это тривиально в CSS с оболочкой overflow = "auto" . Свернуть по строкам : разделить каждую строку на отдельную мини-таблицу с одним столбцом на маленьких экранах. Переключение отображения : таблица на отображение : блок вызовет это с нормальной разметкой таблицы. Свернуть по столбцам : Здесь все усложняется. Вы не можете сделать это с помощью обычной разметки таблиц в чистом CSS, потому что порядок кода — по строкам, а оболочки

Чтобы создать адаптивную таблицу, добавьте элемент контейнера с overflow-x: auto вокруг <стола>:

Пример

<таблица>
. ..

Примечание. В OS X Lion (на Mac) полосы прокрутки по умолчанию скрыты и отображаются только при использовании (даже если установлено «overflow: scroll» или auto).

Совет: Перейдите в наше руководство по таблицам CSS, чтобы узнать больше о как укладывать таблицы.

Адаптивная таблица CSS

Адаптивный стол

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

Добавьте элемент-контейнер (например,

  <таблица>
  
    
       # 
       Первый 
       Последний 
       Дескриптор 
    
  
  
    
       1 
       Отметить 
       Отто 
       @mdo 
    
    
       2 
       Джейкоб 
       Торнтон 
       @fat 
    
    
       3 
       Ларри 
       Птица 
       @twitter 
    
  
  

  <таблица>
  
    
       # 
       Первый 
       Последний 
       Дескриптор 
    
  
  
    
       1 
       Отметить 
       Отто 
       @mdo 
    
    
       2 
       Джейкоб 
       Торнтон 
       @fat 
    
    
       3 
       Ларри 
       Птица 
       @twitter 
    
  
  

  <таблица>
  
    
       # 
       Первый 
       Последний 
       Дескриптор 
    
  
  
    
       1 
       Отметить 
       Отто 
       @mdo 
    
    
       2 
       Джейкоб 
       Торнтон 
       @fat 
    
    
       3 
       Ларри 
       Птица 
       @twitter 
    
  


<таблица>
  
    
       # 
       Первый 
       Последний 
       Дескриптор 
    
  
  
    
       1 
       Отметить 
       Отто 
       @mdo 
    
    
       2 
       Джейкоб 
       Торнтон 
       @fat 
    
    
       3 
       Ларри 
       Птица 
       @twitter 
    
  
  

  <таблица>
  
    
       # 
       Первый 
       Последний 
       Дескриптор 
    
  
  
    
       1 
       Отметить 
       Отто 
       @mdo 
    
    
       2 
       Джейкоб 
       Торнтон 
       @fat 
    
    
       3 
       Ларри 
       Птица 
       @twitter 
    
  
  

  <таблица>
  
    
       # 
       Первый 
       Последний 
       Дескриптор 
    
  
  
    
       1 
       Отметить 
       Отто 
       @mdo 
    
    
       2 
       Джейкоб 
       Торнтон 
       @fat 
    
    
       3 
       Ларри 
       Птица 
       @twitter 
    
  
  

  <таблица>
  
    
       # 
       Первый 
       Последний 
       Дескриптор 
    
  
  
    
       1 
       Отметить 
       Отто 
       @mdo 
    
    
       2 
       Джейкоб 
       Торнтон 
       @fat 
    
    
       3 
       Птица Ларри 
       @twitter 
    
  
  

  <таблица>
  
    
       # 
       Первый 
       Последний 
       Дескриптор 
    
  
  
    
       1 
       Отметить 
       Отто 
       @mdo 
    
    
       2 
       Джейкоб 
       Торнтон 
       @fat 
    
    
       3 
       Птица Ларри 
       @twitter 
    
  
  

  <таблица>
  
    
       # 
       Первый 
       Последний 
       Дескриптор 
    
  
  
    
       1 
       Отметить 
       Отто 
       @mdo 
    
    
       2 
       Джейкоб 
       Торнтон 
       @fat 
    
    
       3 
       Птица Ларри 
       @twitter 
    
  
  

  <таблица>
  
    
       # 
       Первый 
       Последний 
       Дескриптор 
    
  
  
    
       1 
       Отметить 
       Отто 
       @mdo 
    
    
       2 
       Джейкоб 
       Торнтон 
       @fat 
    
    
       3 
       Птица Ларри 
       @twitter 
    
  
  

  <таблица>
  
    
       # 
       Первый 
       Последний 
       Дескриптор 
    
  
  
    
       1 
       Отметить 
       Отто 
       @mdo 
    
    
       2 
       Джейкоб 
       Торнтон 
       @fat 
    
    
       3 
       Птица Ларри 
       @twitter 
    
  
  

  <таблица>
  
    
       # 
       Первый 
       Последний 
       Дескриптор 
    
  
  
    
       1 
       Отметить 
       Отто 
       @mdo 
    
    
       2 
       Джейкоб 
       Торнтон 
       @fat 
    
    
       3 
       Птица Ларри 
       @twitter 
    
  
  

  <таблица>
  
    
       # 
       Первый 
       Последний 
       Дескриптор 
    
  
  
    
       1 
       Отметить 
       Отто 
       @mdo 
    
    
       2 
       Джейкоб 
       Торнтон 
       @fat 
    
    
       3 
       Птица Ларри 
       @twitter 
    
  
  

  <таблица>
  
    
       # 
       Первый 
       Последний 
       Дескриптор 
    
  
  
    
       1 
       Отметить 
       Отто 
       @mdo 
    
    
       2 
       Джейкоб 
       Торнтон 
       @fat 
    
    
       3 
       Птица Ларри 
       @twitter 
    
  
  

  
. .. 

 ... 
 ... 
 ... 
 ... 
 ... 
 ... 
 ... 
 ... 



   ... 
  
   ... 
   ... 
   ... 
   ... 
   ... 
   ... 
   ... 
   ... 
  

  
. .. 
 ... 
 ... 
 ... 
 ... 



   ... 
   ... 
   ... 
   ... 
   ... 
  

  <таблица>
   Список пользователей 
  
    
       # 
       Первый 
       Последний 
       Дескриптор 
    
  
  
    
       1 
       Отметить 
       Отто 
       @mdo 
    
    
       2 
       Джейкоб 
       Торнтон 
       @fat 
    
    
       3 
       Ларри 
       Птица 
       @twitter 
    
  
  

  

  <таблица>
    . ..
  
  

  

  <таблица>
    . ..
  
  

  

  <таблица>
    . ..
  
  

  

  <таблица>
    . ..
  
  

  

  <таблица>
    . ..