Как сверстать такой макет?

Question

[Дмитрий]

Нужно сделать такую таблицу.Четыре правых ячейки фиксированной ширины.Левая резиновая до определённой минимальной ширины, потом правый блок из четырех ячеек должен уходить под левый, образуя две строки.(заголовок этих четырех можно спрятать)
Если позиционировать правый блок с помощью float: right; ,то его нужно будет размещать перед левым блоком, но тогда при уменьшении окна браузера он будет над левым блоком.
Если же использовать position: absolute ,то он будет не видим для левого блока и он(левый ) не будет сужаться при уменьшении окна.
Если использовать таблицу, то не выйдет сместить правый блок под левый.
Какое есть решение?
Думал может сделать таблицу блоками?

Answer 1

[dom1n1k]

Сверстать таблицей, как обычно.
А на маленьких экранах делать ячейки display: block плюс float: left. Для первой ячейки потом указать width: 100%, у остальных по 25%.
Разумеется, нужно подправить display у тегов tr, tbody и так далее.
Как вариант, можно превращать каждую строку во флекс-бокс, но какого-то особого профита от него я тут не вижу.

Comments

[Дмитрий]

до какой версии IE это работает?

[dom1n1k]

display: block работает в любом IE: htmlbook.ru/css/display
с флексом, конечно, посложнее

[Дмитрий]

я имел ввиду если его применить к тегам таблицы и открыть в ие6 ,например.Буду пробовать и тестировать в ИЕ. Спасибо.

[Mr Crabbz]

Дмитрий: ie6? Вы серьёзно? =)

[Дмитрий]

Роман Краббз: да, Роман. Я серьёзно. Есть такое слово надо;) и это не от меня зависит.

Answer 2

[zwoc]

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

Answer 3

[Илья Панков]

а что если... почитать документацию foundation?)

Answer 4

[Дмитрий]

https://css-tricks.com/responsive-data-tables/

Вот нашел отличное решение.Без скриптов. Нормальные браузеры поймут.