Ответственные таблицы, умный способ

У меня есть таблица, содержащая данные. Табличные данные. И это выглядит так.

введите описание изображения здесь

Смотрите эту скрипку .

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

введите описание изображения здесь

(или, если хотите, как эта скрипка .)

Теперь мой вопрос: как вы это делаете? Я бы предпочел только CSS, но до сих пор мне не удалось это сделать только в CSS. (Вторая скрипка содержит атрибуты rowspan , которые не имеют эквивалентов CSS.)

HTML создается на стороне сервера, поэтому я могу создать один из двух макетов в зависимости от ширины windows, но тогда он не будет реагировать на изменение размера windows.

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

Немного экспериментировав, я пришел близко , но это не работает в IE8 и IE9.

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

ya, так как ваш html такой же, вы можете изменить стили для свойств css в соответствии с запросом на медиа, лучшее решение было бы

 @media only screen and (min-width: 769px) { #content { border:1px solid; border-collapse:collapse; } #content td, #content th { border:1px solid; text-align:left; padding:.07em .2em; white-space:nowrap; font-weight:400; } } @media only screen and (max-width: 768px) { #content { border:1px solid; border-collapse:collapse; } #content tr { height:4em; border-bottom:1px solid; } #content th { border:1px solid; text-align:left; padding:.07em .2em; white-space:nowrap; font-weight:400; height:4em; } #content td { padding:.07em .2em; white-space:nowrap; height:1.4em; display:inline; } #content td:not(:last-child)::after { display:block; content:''; height:0; border-bottom:1px solid; } } 

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

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

 @media only screen and (max-width: 768px) { #content{ display:none !important; } } @media only screen and (min-width: 769px) { #content2{ display:none !important; } } 

Я знаю, что это не совсем то, что вы хотите, но я создал jsfiddle некоторое время назад в качестве ссылки, которая могла бы помочь: jsfiddle.net/webbymatt/MVsVj/1

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

Вы можете встроить блокировку элементов. У меня не было много времени, чтобы играть, но что-то вроде следующего:

 #content { border:1px solid; border-collapse:collapse; } #content td, #content th { border:1px solid; text-align:left; padding:.07em .2em; white-space:nowrap; font-weight:400; } #content td { display: inline-block; width: 100px; } 

Хотя это не самое красивое творение!

http://jsfiddle.net/8H3bN/

Проверьте этот код .

Я нашел это решение давно в css-tricks.com.

Стол становится немного грязным:

 
Description 1
Data 1A Data 1B Data 1C
Description 2
Data 2A Data 2B Data 2C

И это css:

  /* Small display targeting */ @media only screen and (max-width: 767px) { /* Force table to not be like tables anymore */ .responsive, .responsive thead, .responsive tbody, .responsive th, .responsive td, .responsive tr { display: block; } /* Hide table headers (but not display: none;, for accessibility) */ .responsive thead tr { position: absolute; top: -9999px; left: -9999px; } .responsive td { /* Behave like a "row" */ position: relative; } .responsive td:before { /* Now like a table header */ position: absolute; } }