Как сделать адаптивную таблицу HTML
В мой список раздражающих меня вещей в веб-дизайне входят таблицы, часто не оптимизированые для устройств меньше компьютера. Допустим, я открыл Википедию на iPhone и просматриваю список эпизодов из «Звёздный путь: Следующее поколение» (я вырос в конце 80 — х), в таблице много данных, и состоит она из множества столбцов. Заканчивается это дело множеством тыканий пальцем в экран , переворачиванием устройства, и раздражением.
Это проблема широко распространена в вэбе несмотря на то, что есть несколько вариантов отзывчивых таблиц, в том числе такой просто с помощью CSS:
Так в чем же препятствие для использования этого или другого шаблона? Нужно много времени? Или усилий? Давайте быстро пробежимся по этой теме.
С чего начать?
Мы создадим такую же таблицу на обычном HTML как выше в примере:
Наша Таблица состоит из четырех столбцов. Давайте добавим немного CSS стилей:
Это похоже на многие HTML-таблицы, с которыми вы работали ранее. И, наверное, сейчас вы думаете, так как же мне сделать таблицу резиновой?
Сделаем таблицу адаптивной
Сначала, добавим атрибут aria-label для каждой ячейки данных с именем столбца. Которые будут использоваться в качестве маркировки в отзывчивом макете. Использование aria-label также обеспечивает поддержку для чтения с экрана.
Теперь напишем несколько медиа-запросов
В маленькой области видимости <tr> и <tr> элементы будут отображаться на блочном уровне, а не как табличные строки и ячейки. А псевдоэлемент :before теперь служит в качестве label.
Вот наша таблица (Попробуйте сузить экран вашего устройства).
See the Pen qargXL by Ruslan (@rkaliev) on CodePen.0
И это все? 😳
Да, в общем то. По крайней мере для этого примера точно все. Имейте в виду, что это только один резиновый макет таблицы с относительно простым содержанием данных. Вы можете использовать различные варианты и управлять более сложными данными, поэтому ваш результат может отличаться. Но всегда принимайте во внимание варианты для лучшего опыта взаимодействия (UX).
Источник: allthingssmitty.com
dev-tricks.ru
Делаем адаптивную таблицу при помощи медиа запроса
Самый простой способ, при помощи медиа запросов для определенного разрешения экрана сделать так, что бы у нас ячейки таблицы перестраивались друг под друга.
- 1.Вычисляем класс блока, внутри которого находится таблица.
- 2.Подбираем такую ширину, начиная с которой у нас таблица уже становиться не читабельной.
- 3.В файле стилей темы, или в файле стилей сайта, в зависимости от того, на какой CMS работает ваш сайт, пишем следующий медиа запрос:
Здесь мы для максимальной ширины 400 пикселей для всех ячеек таблицы указываем свойство display: block. То есть, превращаем наши ячейки из табличных элементов в блочные.
Дело в том, что блочные и табличные элементы ведут себя по разному. В частности, блочные элементы, по умолчанию, занимают ширину 100% и располагаются друг под другом, без обтекания.
И так как у нашей таблицы есть еще строка с заголовками столбцов, то нам нужно будет прописать еще вот такой селектор:
- 4.Сохраняем изменения и смотрим, что у нас получилось.
Для того чтобы сделать нашу адаптивную таблицу привлекательнее я убрала блок с названием столбцов и для первых ячеек в строке задала другой цвет фона:
Если у вас на сайте используются не сильно сложные таблицы, то в принципе вы можете использовать этот способ для адаптации таблиц, но я хочу вам показать еще один более интересный способ, который позволит сделать таблицы более понятными и аккуратными.
Адаптивные таблицы с использованием специального скрипта
В этом случае при уменьшении экрана происходит трансформация таблицы, она перестраивается в два столбца. Заголовки столбцов переходят в первый столбец и дублируются для каждой позиции.
Если в первом случае мы полностью скрывали строку с заголовками, и было не очень понятно, какие данные находятся в ячейках, то во втором случае здесь для каждого значения дублируется заголовок таблицы. На мой взгляд, этот способ более удобен и привлекательный для посетителей вашего сайта.
Итак, давайте разберем, что же нужно для того, чтобы ваша таблица стала адаптивной и начала вести себя подобным образом.
- 1.Скачиваем следующий архив со скриптом к себе на компьютер:
- 2.После скачивания и разархивирования архива у вас получится вот такой набор файлов:
Файл index.html вы можете открыть в своем браузере. Он представляет собой инструкцию по работе со скриптом и его настройке.
- 3.Закачиваем на свой сайт файл stacktable.js, который находится в папке js, и файл stacktable.css, который находится в папке css.
- 4.В зависимости от того, как сделан у вас сайт, на CMS или без CMS, и какая у вас CMS используется, папки для загрузки этих файлов будут отличаться.
Если у вас сайт работает на CMS, то вам нужно будет открыть папку с активной темой или шаблоном. В моем случае для сайта используется CMS WordPress, поэтому здесь мне нужно будет открыть папку:
js-файл загружаем в папку js, а css-файл — в папку css.
- 5.После того, как файлы загружены, нам необходимо их подключить на самом сайте. Файл stacktable.css нам нужно будет подключить перед закрытием тега head, а файл stacktable.js перед закрытием тега body.
Для сайта работающего на WordPress фрагмент кода отвечающий за вывод тега head находится внутри файла header.php, который расположен в папке с активной темой.
- 6.Для CMS WordPress есть специальная функция get_template_directory_uri(), которая позволяет в автоматическом режиме определить полный пут к папке с активной темой. Воспользуемся этой функцией и добавим следующий фрагмент кода:
- 7.Теперь тоже самое нам необходимо проделать с java-script файлом. Открываем файл footer.php, который находится в папке с активной темой. Находим тег </body> и перед ним вставляем следующий код:
- 8.Для инициализации скрипта перед закрытием тега body добавляем следующий скрипт:
Здесь вам нужно вместо #primary table подставить либо тот класс таблицы, который используется у вас, либо же если для какой-то конкретной таблицы вы не задавали определенного класса, то указываем класс или идентификатор блока внутри которого находится таблица:
- 9.Сохраняем внесённые изменения. Теперь данный скрипт будет срабатывать для всех таблиц находящихся внутри блока с указанным классом или идентификатором.
- 10.Так же при желании мы можем еще сделать, что бы ячейки с порядковыми номерами подсвечивались определенным цветом, а пункты, находящиеся в первом столбце выделялись жирным. Для этого в файле style.css допишем следующий код:
- 11.По умолчанию таблица начинает перестраиваться начиная с ширины экрана 800px. Если вам нужно это изменит, то открываем файл:
Дале находим строку
И вместо 800px выставляем своё значение, после чего сохраняем изменения в файле.
Видеоинструкция
Вот такие два простых и довольно интересных способа позволят вам решить проблему с созданием адаптивных таблиц. Причем, таблицы у вас могут быть самой различной сложности.
Я надеюсь, что данная статья будет для вас полезной. Не забывайте оставлять свои комментарии и делиться статьей в социальных сетях.
На этом у меня все. Желаю вам успехов в решении проблем с адаптацией таблиц и до встречи в следующих статьях!
С уважением Юлия Гусарь
impuls-web.ru
Ранее мы рассматривали, как адаптировать простую HTML-таблицу под мобильные устройства. На этот мы раз затронем схожую тему, но возьмем таблицу посложнее, с заголовками.
Для структуризации данных (например, стоимость услуг или часы работы) и удобном представлении пользователю идеально подходят таблицы, которые в современное время должны быть адаптивными для смартфонов и планшетов, иначе важные элементы, хранящиеся в ячейках, могут быть скрыты за пределами экрана.
Нарисуем таблицу графика работы службы доставки со сменными курьерами и ценами, добавив атрибут aria-label (текстовую метку) к ячейкам с данными.
| Время доставки | Курьер | Оплата картой | Стоимость доставки |
|---|---|---|---|
| 8:00-12:00 | Николай | Нет | 20 руб. |
| 12:00-18:00 | Вадим | Да | 50 руб. |
| 18:00-23:00 | Алексей | Да | 120 руб. |
| 1:00-6:00 | Евгений | Нет | 90 руб. |
HTML-код:
<table class="delivery"> <thead> <tr> <th>Время доставки</th> <th>Курьер</th> <th>Оплата картой</th> <th>Стоимость доставки</th> </tr> </thead> <tbody> <tr> <td aria-label="Время доставки">8:00-12:00</td> <td aria-label="Курьер">Николай</td> <td aria-label="Оплата картой">Нет</td> <td aria-label="Стоимость доставки">20 руб.</td> </tr> <tr> <td aria-label="Время доставки">12:00-18:00</td> <td aria-label="Курьер">Вадим</td> <td aria-label="Оплата картой">Да</td> <td aria-label="Стоимость доставки">50 руб.</td> </tr> <tr> <td aria-label="Время доставки">18:00-23:00</td> <td aria-label="Курьер">Алексей</td> <td aria-label="Оплата картой">Да</td> <td aria-label="Стоимость доставки">120 руб.</td> </tr> <tr> <td aria-label="Время доставки">1:00-6:00</td> <td aria-label="Курьер">Евгений</td> <td aria-label="Оплата картой">Нет</td> <td aria-label="Стоимость доставки">90 руб.</td> </tr> </tbody> </table>
CSS-код:
table.delivery {width: 100%; border: 0px; border-collapse: collapse;} table.delivery thead {font-weight: bold;} table.delivery td {padding: 0.6rem 1rem; border-bottom: 1px solid #e8e9eb;}
Внешний вид таблицы на ПК с фиксированным разрешением 1140 пикс. будет выглядеть примерно так.
При уменьшении разрешения дисплея до 334 пикс. ячейки сожмутся на сколько это возможно и оставят часть информации скрытой.
С помощью CSS мы сможем добиться нужно эффекта – разделение таблицы на понятные посетителю блоки при разрешении экрана меньше 800 пикс. Просто добавим к уже созданным стилям следующий код:
@media screen and (max-width: 800px) { table.delivery thead { display: none; } table.delivery tr { display: block; margin-bottom: 1rem; border-bottom: 2px solid #e8e9eb; } table.delivery td { display: block; text-align: right; } table.delivery td:before { content: attr(aria-label); float: left; font-weight: bold; } }
На скриншоте ниже вы можете наглядно оценить превосходство данного метода.
Спасибо за внимание! Не забывайте ставить оценку в рейтинге статьи!
434 просмотров всего, 1 просмотров сегодня
lospirata.ru
Установка и настройка веб браузера Arachne для подключения к сети Интернет через Ethernet
A : Установка веб браузера Arachne на диске, создаваемом в оперативной памяти — в этом случае веб браузер Arachne работает быстрее всего. Размер оперативной памяти должен позволять создать RAM диск объемом в 6 Мб и более. Что бы установить и настроить веб браузер Arachne для подключения к сети Интернет через Ethernet, необходимо несколько программ: 1. Веб браузер Arachne [ Скачать ] 2. Пакет с кириллицей кодировки KOI8-R koi8-r.apm [ Скачать ] 3. Пакет с кириллицей кодировки CP-1251 / Windows-1251 cp1251.apm [ Скачать ] 4. Драйвер мыши, например mouse.com [ Скачать ] 5. Пакетный драйвер для сетевого адаптера Ethernet: http://www.crynwr.com/drivers/ http://www.georgpotthast.de/sioux/packet.htm 6. Microsoft Network Client 3.0 [ Скачать ] 7. NDIS 2.0 драйвер для сетевой карты Ethernet. Например: Realtek RTL8029AS [ Скачать ]. Другие можно попробовать найти, к примеру, на сайтах производителей сетевых адаптеров Ethernet 8. Архиваторы. Например, PKZIP [ Скачать ] и PKUNZIP [ Скачать ] 9. В случае, если будет использоваться не MS-DOS 6.0+, QEMM97 [ Скачать ] 10. В случае, если будет использоваться не MS-DOS 6.0+, TDSK [ Скачать ] Установка и настройка веб браузера Arachne по шагам: 1. В оперативной памяти создать диск. Какая именно буква будет назначена ему операционной системой получится из расчета, что A: и B: пойдут для floppy дисководов (даже если он один, то все равно зарезервированы будут две буквы), C: для первого активного основного раздела на первом жестком диске; если есть еще диски, то будут использоваться последовательно столько букв, что бы назвать их всех. Если при этом нет устройств, установленных через DRIVER.SYS или аналогичные драйверы, то следующая буква будет относиться к RAM-диску. Что бы убедиться наверняка, можно, после добавления соответствующей строки в CONFIG.SYS (См. ниже) для создания RAM-диска, например, перезагрузить компьютер и опытным путем проверить под какой буквой находится RAM-диск. В рассматриваемом случае, это E: В зависимости от объема оперативной памяти нужно решить, сколько мегабайт можно выделить для RAM-диска. В принципе, чем больше, тем лучше. Так как, например, кэш браузера при продолжительном и интенсивном использовании в рамках сессии будет разрастаться в объеме. В данном примере объем RAM-диска назначается в 12 000 Кб. Для драйвера MS-DOS RAMDRIVE.SYS верхний предел, это 32 767 Кб, а для TDSK — 64 Мб. Что бы создать такой диск, нужно где-нибудь в средней части файла CONFIG.SYS прописать следующее: DEVICE=C:DOSRAMDRIVE.SYS 12000 512 512 /E 2. Создать папку, например C:DRIVERS, куда поместить: драйвер мыши, например mouse.com, пакетный драйвер для сетевого адаптера Ethernet и NDIS 2.0 драйвер для сетевого адаптера Ethernet. 3. В файл AUTOEXEC.BAT добавить строку, которая будет запускать драйвер мыши. В ней указать полный пусть к драйверу; может быть любой: LH C:DRIVERSMOUSE.COM 4. Подготовить установочные дискеты Microsoft Network Client 3.0: DSK3-1.EXE -d A: DSK3-2.EXE -d A: 5. С первой дискеты запустить setup.exe и начать установку Microsoft Network Client 3.0 Начинается установка. Что бы продолжить: Enter Выбрать каталог, куда будет установлен Microsoft Network Client 3.0. Можно ввести свой вариант, а можно оставить как есть — в рассматриваемом примере оставлено как есть.
www.kompx.com
Адаптивная таблица на чистом html и css!
Я давно мечтал приручить такую дикую штуку, как таблица. Таблицы в HTML ведут себя очень непредсказуемо. Язык интернета постоянно развивается, а таблицы остаются прежними. И меняться, похоже, не собираются. Они плохо поддаются стилизации посредством CSS и принципам адаптивности. Но я всё-таки нашёл способ, как сделать таблицу «отзывчивой», адаптивной.
Автор описываемого мною метода – Майкл Чен, который предложил изящный метод придания таблице адаптивности. Он присвоил ячейкам таблицы атрибут «data-label», пришедший к нам из Exel, в соответствии с колонкой, в которой располагается ячейка.
<table>
<thead>
<tr>
<th>Адрес</th>
<th>Откуда</th>
<th>Браузер</th>
<th>IP</th>
<th>Дата и время</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="Адрес">http://webdesign.ru.net/download/</td>
<td data-label="Откуда">https://github.com/maindefine/ruxe-engine/blob/master/README.md</td>
<td data-label="Браузер">Mozilla Firefox 5.0</td>
<td data-label="IP">127.0.0.1</td>
<td data-label="Дата и время">April 17, 1937</td>
</tr>
***
<tr>
<td data-label="Адрес">http://ruxe-engine.ru/viewforum.php?f=10&sid=e8de49937b69f576ddc4a7ebb70b1dca</td>
<td data-label="Откуда">http://localhost/test/search.html</td>
<td data-label="Браузер">May 15 1928</td>
<td data-label="IP">127.0.0.1</td>
<td data-label="Дата и время">April 17, 21:15:03</td>
</tr>
</tbody>
</table>
При обычных, больших разрешениях монитора атрибут скрыт. Мы видим только заголовки колонок таблицы (THEAD). Для того чтобы его показать, необходимо указать правило в медиа-запросах CSS. И тогда шапка таблицы исчезает, а у каждой ячейки появляется метка, в соответствии с колонкой.
table thead {
display: none;
}
table td:before {
content: attr(data-label);
}
Пример такой таблицы можно посмотреть здесь. Поиграйте размером окна браузера, внимательно проанализируйте файл css. Если вы найдёте метод изящнее, напишите мне, обсудим!
Опубликовал Administrator — 29 марта 2016, 06:41 — 2740 просмотров
Похожие записи: Кастомные теги как в Facebook
Комментарии
webdesign.ru.net
Bootstrap-способ вёрстки адаптивной таблицы
Скажем прямо: по-настоящему адаптивной такую таблицу не назовешь. Она хорошо смотрится на мобильном, ничего никуда не выпирает и вёрстка сайта не «течёт». Такой способ хорошо подходит, если на вашем сайте таблицы встречаются редко и нет смысла подключать какой-то плагин и писать дополнительные стили из-за них. Такой способ используется Bootstrap-ом. Итак, как это реализуется?
Всё просто: таблица обёрнута в div, которому задана максимальная ширина в 100% и overflow: auto.
<div class="table-responsive" style="max-width: 100%; overflow: auto;"> <table> ... </table> </div>Если таблица длинная, также можно задать максимальную высоту и зафиксировать шапку таблицы.
Результат, как и следующий пример, можно посмотреть на этой странице.
Вёрстка по-настощему адаптивной таблицы
Если же у вас на сайте частенько встречаются таблицы, имеет смысл воспользоваться плагином Footable.
Для начала нужно подключить плагин (скачать на GitHub или подключить с CDN), а также инициализировать его:
<script src="/footable.min.js"></script> <script> $(function() { $('.table').footable({}); }); </script>Здесь нужно кое-что прояснить: скрипт почему-то считает не ширину viewport-а, а ширину таблицы. Чтобы это исправить, нужно чуть «модернизировать» скрипт:
jQuery(function () { jQuery('.table').footable({ calculateWidthOverride: function() { return {width: jQuery(window).width()}; } }); })
В инициализации указываем класс таблицы или просто тег table, если хотим, чтобы все таблицы на сайте были адаптивными.
Далее для ячеек в шапке таблицы, с помощью data-аттрибутов указываем на каких размерах какие колонки будут скрываться:
<table class="table"> <thead> <th>Модель телефона</th> <th data-breakpoints="mobile">Цена</th> <th data-breakpoints="mobile tablet">RAM, Гб</th> <th data-breakpoints="mobile tablet">Диагональ, дюймов</th> <th data-breakpoints="mobile tablet">PPI</th> <th data-breakpoints="mobile tablet">Аккумулятор, мА·ч</th> </thead> <tbody> ... </tbody> </table>Что всё это значит? На планшетах будут скрываться колонки «RAM», «Диагональ», «PPI» и «Аккумулятор». При уменьшении до телефонов, к ним присоединится и колонка «Цена».
Контрольные точки можно указать в инициализации:
jQuery(function () { jQuery('.table').footable({ calculateWidthOverride: function() { return {width: jQuery(window).width()}; }, breakpoints: { mobile: 0, tablet: 720, desktop: 1024 } }); })Это значит что в промежутке 0-720 действует правило для mobile, 720-1024 — tablet, а выше 1024 — desktop. Ничто не мешает создать вам ещё больше правил, если это требуется.
Также можно сделать, чтобы какая-то колонка была раскрыта по-умолчанию. Для этого указываем data-атрибут data-expanded=«true»
<table class="table"> <thead> <tr class="footable-header"> ... </tr> </thead> <tbody> <tr data-expanded="true"> <td>OnePlus One</td> <td>100500 руб</td> <td>3</td> <td>5.5</td> <td>401</td> <td>3100</td> </tr> ... </tbody> </table>На этом возможности плагина не заканчиваются, но для создания адаптивных таблиц этого вполне достаточно. Остальные возможности рассмотрим в следующий раз.
webbeaver.ru
Responsive Tables
Начну с моего фаворита — Responsive Tables. Это изящное решение на jQuery и Bootstrap 3, позволяющее скрывать некоторые колонки (все настраивается) или добавлять горизонтальную прокрутку на устройствах с маленькими экранами.
Самый простой способ
Есть быстрый вариант, без дополнительный плагинов и нагромождений, который позволит всем таблицам на сайте добавить горизонтальную прокрутку всего несколькими строками CSS:
@media screen and (max-width: 640px) { table { overflow-x: auto; display: block; } }Желательно, чтобы таблицы были обернуты в DIV с "overflow-x: scroll".
Недостатком этого способа является то, что нет никакой индикации горизонтального скролла.
FooTable
Интересное решение на jQuery, которое имеет как Bootstrap, так и отдельную версии. На маленьких экранах позволяет сократить количество колонок, при этом показывая скрытые данные по клику.
→ Скачать на GitHub или посмотреть демо
Stacktable.js
jQuery-плагин, позволяющий превращать таблицы в карточки на мобильных устройствах.
→ Скачать на Github или смотреть демо
Tablesaw
Плагин включает много разных способов отображения табличных данных на мобильных устройствах.
→ Скачать на GitHub
Пример без jQuery
Пример отображения таблицы без использования jQuery-плагина.
→ Смотреть на Codepen.
Еще есть пример на Codepen без Javascript, но с использованием display:block и data attributes.
Способ от David Bushell
Реализация адаптивных таблиц в виде добавления горизонтальной прокрутки с использованием только CSS. Выглядит очень хорошо.
→ Смотреть на Codepen
habr.com
Garrett Dimon:
Data tables don’t do so well with responsive design. Just sayin’.
He has a good point. Data tables can be quite wide, and necessarily so. A single row of data needs to be kept together to make any sense in a table. Tables can flex in width, but they can only get so narrow before they start wrapping cells contents uncomfortably or just plain can’t get any narrower.
Responsive design is all about adjusting designs to accommodate screens of different sizes. So what happens when a screen is narrower than the minimum width of a data table? You can zoom out and see the whole table, but the text size will be too small to read. Or you can zoom into the point of readability, but browsing the table will require both vertical and (sad face) horizontal scrolling.
So here’s what we are gonna do…
We’re going to use «responsive design» principles (CSS @media queries) to detect if the screen is smaller than the maximum squishitude of our table. If it is, we’re going to reformat the table.
We’re being good little developers and using Plain Ol’ Semantic Markup here for our table. Bare bones example:
<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>Our regular CSS is nothing special:
/* 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; }The small-screen responsive stuff comes in now. We’ve already figured out our minimum table width is about 760px so we’ll set up our media query to take effect when the narrower than that. Also, we’ll target iPads as they are right in that zone.
The biggest change is that we are going to force the table to not behave like a table by setting every table-related element to be block-level. Then by keeping the zebra striping we originally added, it’s kind of like each table row becomes a table in itself, but only as wide as the screen. No more horizontal scrolling! Then for each «cell», we’ll use CSS generated content (:before) to apply the label, so we know what each bit of data means.
/* Max width before this PARTICULAR table gets nasty This query will take effect for any screen smaller than 760px and also iPads specifically. */ @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: "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: "Arbitrary Data"; } }And so, desktops get the regular table experience, mobile (or otherwise small screens) get a reformatted and easier to explore table:
Hey what about IE?
IE 9 and down don’t like you setting table elements as display: block; It does weird stuff and doesn’t work right. But IE 9 does support media queries. So my solution thus far is just to wrap the media query styles in conditional comments.
<!--[if !IE]><!--> <style> /* table-related media query stuff only */ </style> /* Or an external stylesheet or whatever */ <!--<![endif]-->If the problem was only that older versions of IE don’t support media queries, we could use the css3-mediaqueries-js project (polyfills support for all media queries) or Respond (also polyfill, way smaller, but only does min/max-width). They both work very well. But this isn’t our problem in this case.
This all works fine in IE 10 and IE 10 also ignores conditional comments, so the styles will work even if wrapped in !IE conditionals.
See it
There are two pages to the demo, one the responsive table solution, and a link to the non-responsive version so you can jump back and forth to see the problem.
View Demo
In the demo, I use a couple of extra media queries for mobile to force the body to certain widths so they don’t get feisty. View source to snag.
This isn’t perfect…
This is just one potential solution to the problem to data tables on small screens. It’s not perfect. There may be some accessibility concerns (or maybe not, I’m really not sure). It’s likely there are some fancy JavaScript solutions that could approach things differently and also work great. If other solutions to this come along, I’ll keep this page updated.
css-tricks.com