Таблицы адаптивные css: Адаптивные таблицы в вебе / Хабр

Адаптивные CSS-фреймворки, сетки, классы видимости / likes 12 / блог студии Клондайк!

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

Что такое CSS-фреймворк?

Грубо говоря это набор файлов, HTML страницы, CSS таблицы и JS скрипты.

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

Для чего они собственно понадобились? Ведь CSS и JS вполне можно написать самому?! Как и все остальные фреймворки, они были созданы для ускорения разработки и стандартизации кода. Тот же bootstrap создавался как корпоративный набор инструментов, чтобы при программировании интерфейсов, разработчики использовали уже готовые блоки кода, тем самым увеличивали бы производительность и приводили код к единому формату.

О преимуществах:

• Человек с низким уровнем знания верстки может создавать более-менее удобоваримые решения.
• Адаптивность верстки.
• Увеличение скорости разработки.
• Кроссбраузерность.
• Шаблонность кода, что позволяет увеличить скорость разработки и минимизировать накладки при командной работе.

О недостатках:

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

Сравнительная таблица популярных CSS-фреймворков

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

Название	Bootstrap	Foundation v5	960gs	Skeleton
Комьюнити	многочисленное	среднее	среднее	малое
Сетки	резиновые, адаптивные, фиксированные	резиновые, адаптивные	фиксированные	фиксированные
Элементы UI	большая библиотека, отлично подойдет для быстрой разработки	библиотека скромнее чем у bootstrap, но все равно прекрасно подойдет для быстрой разработки	нет	набор крайне ограничен
Истоки	разработан как внутренний список правил для штатных разработчиков.	разработан ZURB для использования в коммерческих проектах.	разработан Nathan Smith для увеличения скорости верстки.	создавался целенаправленно как минималистичный фреймворк.
Версия	2.3.2	5	last	1.2
Сайт	http://getbootstrap.com/2.3.2/	http://foundation.zurb.com/	http://960.gs/	http://www.getskeleton.com/
Разработчик	Twitter	ZURB	Nathan Smith	Dave Gamache
Браузеры	IE8+, Chrome, Firefox, Opera, Safari	IE9+, Chrome, Firefox, Opera, Safari	IE7+, Chrome, Firefox, Opera, Safari	IE7+, Chrome, Firefox, Opera, Safari
Устройства	PC/Tablet/Phone	PC/Tablet/Phone	PC/Tablet/Phone	PC/Tablet/Phone
Лицензия	Apache License v2. 0	MIT	GPL & MIT	MIT
Препроцессор	LESS/SASS	SASS	—	—

Ещё 30 CSS-фреймворков…

Комментарии

Bootstrap

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

Foundation v5

Как не странно, но третью версию фреймворка до сих пор используют, видимо из-за того что она, в отличии от последующих версий, поддерживает IE7+. Тем не менее она явно устарела, да и процентная доля пользователей IE7 стремится к нулю, поэтому стоит обратить внимание на новые версии. В новых версиях к примеру, изменена привязка стилей, теперь они привязываются не к типу устройств, а к «фишкам», например показывать на таче. Из плюшек относительно bootstrap можно выделить более семантичные классы используемые в CSS, а также количество адаптивных классов, в foundation их в 3 раза больше, а это значит что он более гибок в настройке адаптивности макетов.

960gs

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

Skeleton

Легкий фреймворк, собственно это является его основной фишкой. Но есть два минуса, 1 — присутствуют проблемы с адаптивностью сетки, 2 — проект давно не обновлялся. Но если нужен максимально простой каркас и не нужно огромное количество UI элементов, то решение вполне годное.

Что такое сетка?

Как мы видим, все CSS фреймворки базируются на сетках, что же такое сетка? Давайте рассмотрим пример сетки 960. gs.

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

Количество колонок в сетке может быть любым, но излишнее дробление выльется косяками, поэтому чаще всего используют 12ти и 16ти колончатые сетки. Также у более-менее крупных фреймворков имеются собственные генераторы сеток, например генератор 960.gs — http://grids.heroku.com/. При помощи нехитрых инструментов мы можем создать свою сетку, с произвольной шириной, количеством колонок и расстоянием между ними.

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

Классы видимости.

С появлением адаптивной верстки появилось понятие классов видимости, что же это такое? Рассмотрим на недавнем примере.

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

Классов и свойств скрытия/отображения элементов сейчас масса у bootstrap к примеру их 6 штук. Думаю в переводе они не нуждаются, поэтому просто перечислю.

• .visible-phone
• .visible-tablet
• .visible-desktop
• .hidden-phone
• .hidden-tablet
• . hidden-desktop

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

Основанные на размере экрана:

• .show-for-xlarge
• .show-for-large
• .show-for-large-up
• .show-for-medium
• .show-for-medium-down
• .show-for-small
• .hide-for-xlarge
• .hide-for-large
• .hide-for-large-up
• .hide-for-medium
• .hide-for-medium-down
• .hide-for-small

Основанные на ориентации:

• .show-for-landscape
• .show-for-portrait

Основанные на сенсорных возможностях:

• .show-for-touch
• .hide-for-touch

Основанные на возможности печати:

• .print-only
• .hide-on-print

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

ИТОГО заключение

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

Таблицы · Bootstrap на русском

Стили для отображения Контента с некоторыми из наиболее часто используемых HTML-элементов, включая нормализацию, типографика, Изображения, таблицы и более.

Из-за повсеместного использования таблицы через сторонние виджеты календарями и датами, мы разработали таблицы Для быть отказ в. Просто добавьте базовый класс .table любой <table>, расширить пользовательские стили или различных классов включен модификатор.

Содержание

• Содержание
• Примеры
• Таблица параметры заголовка
• «Зебра»
• Рамочная таблица
• Наведение строк
• Небольшая таблица
• Контекстные классы
• Адаптивные таблицы
  • Оплавления

Примеры

Используя самые элементарные таблица наценки, вот как . table на основе таблицы смотри на Bootstrap.

<table>
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Вы также можете инвертировать цвета—со светлым текстом на темном фоне—с . table-inverse.

<table>
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Таблица параметры заголовка

Аналогично по умолчанию и обратные таблицы, использовать один из двух классов модификатор, чтобы сделать <thead> появляются светло-или темно-серый.

<table>
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
<table>
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

«Зебра»

Используйте . table-striped для добавления зебра-чередование любого таблица подряд в <tbody>.

<table>
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

<table>
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Рамочная таблица

Добавить . table-bordered для границ со всех сторон таблица и клеток.

<table>
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@TwBootstrap</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">4</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

<table>
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@TwBootstrap</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">4</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Наведение строк

Добавить . table-hover для включения наведение состояние О таблица строк в <tbody>.

<table>
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

<table>
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Небольшая таблица

Добавьте класс . table-sm, чтобы сделать таблицу более компактной, уменьшив наполовину внутренний отступ в ячейках.

<table>
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

<table>
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Контекстные классы

Использовать контекстные классы для стиля строк таблицы или отдельных ячеек.

<!-- В строках -->
<tr>. ..</tr>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
<!-- В ячейках (`td` или `th`) -->
<tr>
  <td>...</td>
  <td>...</td>
  <td>...</td>
  <td>...</td>
  <td>...</td>
</tr>

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

<!-- В строках -->
<tr>. ..</tr>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
<!-- В ячейках (`td` или `th`) -->
<tr>
  <td>...</td>
  <td>...</td>
  <td>...</td>
  <td>...</td>
  <td>...</td>
</tr>

Передать смысл для ассистивных технологий

Используя цвет, чтобы добавить смысл только обеспечивает визуальную индикацию, которая не будет доведена до пользователей ассистивных технологий, таких как экранные дикторы. Убедитесь, что информация обозначается цвет либо очевидно из самого содержимого (например, текст), или включен с помощью альтернативных средств, таких как дополнительный текст, скрытый с .sr-only класс.

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

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

Вертикальной подрезки/усечения

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

Firefox и fieldsets

Firefox имеет какой-то несуразный набор полей для укладки участием width что мешает быть таблице адаптивной. Это не может быть изменено без Firefox на конкретные взломать, что мы не дают в Bootstrap:

@-moz-document url-prefix() {
  fieldset { display: table-cell; }
}

Для получения дополнительной информации, прочитайте этот ответ на Stack Overflow.

<div>
  <table>
    . ..
  </table>
</div>

Обратный стиль

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

Содержание заказа и сложных таблицы

Помните, что table-reflow изменения стиля визуальный порядок содержания. Убедитесь, что вы только применить этот стиль к хорошо сформированные и простые данные таблицы (и в частности, не использовать это для разметка таблицы) с соответствующими <th> таблица заголовков ячеек для каждой строки и столбца.

Кроме того, этот класс не будет работать за таблицы клеток, которые охватывают несколько строк или столбцов (с помощью rowspan или colspan атрибуты).

<table>
  <thead>
    <tr>
      <th>#</th>
      <th>Table heading</th>
      <th>Table heading</th>
      <th>Table heading</th>
      <th>Table heading</th>
      <th>Table heading</th>
      <th>Table heading</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
  </tbody>
</table>

Crafty Адаптивные таблицы | Детская площадка от ZURB

Почему мы построили это

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

• Не нарушает адаптивные макеты
• Не скрывает данные без необходимости
• По-прежнему позволяет сравнивать строки

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

Мы создали их специально для работы с Foundation, нашей интерфейсной средой с открытым исходным кодом для адаптивных сайтов, но она прекрасно работает с любым адаптивным сайтом.

Как сделать ваши таблицы адаптивными

Мы хотели, чтобы это было невероятно легко реализовать. Начните с загрузки пакета кода — он включает демонстрационный файл, а также два ключевых файла, которые вам нужны для этого: responsive-tables.js и responsive-tables.css .

Прикрепить к разметке

К любой таблице данных в вашей разметке вам просто нужно добавить класс .responsive , а CSS/JS сделает все остальное. Вот так:

 <таблица>
  <тр> … 

Готов к року

Оттуда ваши столы будут изменены на стороне клиента, когда окно меньше, чем у обычного планшета (то есть почти на любом смартфоне или очень маленьком планшете).

Совместимость устройств

Этот метод был протестирован на iOS, Android и Windows Phone 7 (а также на Chrome, Safari и Firefox). Одно предостережение: поскольку Android 2. 3 не поддерживает прокручиваемые элементы div на странице, прокрутка не будет работать на этих устройствах. Android 3 и более поздние версии поддерживают это, поэтому на более новых телефонах Android это не проблема.

Получите отличную работу по проектированию или проектированию продукта

через доску объявлений ZURB

Быстрый старт

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

Пример страницыЗагрузить код

Работает с Фондом

Этот метод был разработан в Фонде и для него. Ознакомьтесь с Foundation, чтобы узнать, что еще можно сделать с адаптивной инфраструктурой.

Посетите фонд »

Доступно на GitHub

Найдите последний код на Github или зайдите туда, чтобы войти / найти любые проблемы. Вы можете открыть его прямо в GitHub для Mac, здесь »

Мысли?

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

Войдите в систему, используя свой идентификатор ZURB

Объяснение вашего идентификатора ZURB

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

Университет

Ресурсы по разработке продуктов, курсы и обучение.

Приложения для дизайна

Создание прототипов, итерация и сбор отзывов о ваших продуктах.

Foundation

Самый передовой фреймворк в мире.

×

Как писать адаптивные HTML-таблицы (для Markdown-сайтов) · JohnFraney.ca

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

Вот как таблица выглядела в мобильном Chrome:

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

(Если вы соединяете телефон и планшет, стали бы вы стучать носом по экранам?)

И я задумался: какие есть способы сделать таблицы более отзывчивыми и предотвратить их переполнение? на маленьких экранах?

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

Давайте приступим.

Проблема

Причина переполнения таблиц в том, что они слишком широкие.

«Ну, ага.»

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

Ответ: table-layout :

По умолчанию большинство браузеров используют алгоритм автоматической компоновки таблицы. Ширина таблицы и ее ячеек регулируется в соответствии с содержимым. MDN — table-layout

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

W3C, организация веб-стандартов, возглавляемая Тимом Бернерсом-Ли, изобретателем Интернета, описывает алгоритм определения ширины столбца таблицы в разделе «Автоматическая компоновка таблицы» спецификации CSS 2 Tables.

Алгоритм, описанный в спецификации, — это полный рот, нет, полный рот лошади. Вот более краткая версия:

1. Попробуйте разместить столбцы в таблице, не разрывая строки в ячейках столбца. (Это максимальная ширина столбцов.)
   • Если осталось свободное место, распределите его между столбцами
2. Если столбцы при их максимальной ширине шире таблицы, уменьшите столбцы до минимальной ширины
   • Если это слишком широкий, переполнит контейнер таблицы

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

1. Уменьшить количество столбцов
2. Обработать переполнение
3. Уменьшить максимальную ширину столбцов

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

В таблице использованы данные со страниц Википедии Галифакса, Сан-Франциско и Торонто.

Способ устранения 1: уменьшение столбцов

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

Возьмем таблицу city и рассмотрим два способа уменьшить количество столбцов.

1.1 Ленивая Сьюзан, или Поворотный стол

Этот метод работает, когда в таблице больше столбцов, чем строк. В приведенной выше таблице городов 5 столбцов и 4 строки (5×4). Если мы повернем таблицу так, чтобы города оказались вверху, мы можем преобразовать ее в таблицу 4×5:

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

1.2 Уплотнение колонн

В некоторых таблицах есть столбцы, которые можно объединить без потери информации. В таблице городов столбцы с самой высокой и самой низкой температурой могут быть объединены в столбец «Диапазон температур». Поскольку таблица не сортируется, это простое решение для экономии места.

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

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

Способ устранения 2: Обработка переполнения

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

Bootstrap реализует адаптивные таблицы, заключая таблицы в