Как сверстать данное адаптивно?

Question

[GaserV]

Подскажите. Как сверстать это адаптивно в соответствии с макетом? Верстка реализована таблицей.

<table class="order-table" cellpadding="0" cellspacing="0">
					<tr>
						<td>Дополнительная гарантия — 2 года</td>
						<td>Стоимость:	5000.00 руб.</td>
						<td>Количество: <input type="text" class="count-input" value="2"></td> 
						<td>Сумма:	5000.00 руб.</td>
						<td><span class="close-ico1"></span></td>
					</tr>

Answer 1

[Максим Тимофеев]

Адаптивная таблица: getbootstrap.com/css/#tables-responsive

Comments

[GaserV]

верстка не на bootstrap.

[Максим Тимофеев]

GaserV: НУ так сделайте по аналогии. Не берите реализацию, берите метод.

Answer 2

[Иван Дрожжин]

Как на счет при ширине x из 6 колонок делать 1 и размещать все одно под другим:
Аллюминевый радиатор - Global Iseo
Стоимость 5000.00
Количество 1
Сумма: ...

Comments

[GaserV]

Добавил структуру текущего кода html. Как быть в таком случае?

[Максим Тимофеев]

Читайте про медиа запросы, например тут: alexdev.ru/1497

[Иван Дрожжин]

GaserV: Вот тут много полезного про медиа-запросы htmlbook.ru/css/media
Выглядить должно на подобии:
media (max-width: 992px) {
.class {
width: Npx;
}
}

[Иван Дрожжин]

и @ перед media))

[GaserV]

так я все адаптивно сделал. Не знаю как быть с таблицей.

[GaserV]

я пишу что при такомм-то media > td = width: 50%. Но ширина не устанавливается.

[Максим Тимофеев]

Надо верстать дивами и задавать им ширину в зависимости от ширины экрана, через медиа запросы.

[Максим Тимофеев]

А вообще верстка без css фреймворка - это ананизм. Подключили бы любой фреймворк с greed системой и адаптивность перестала бы вызывать проблемы

[Иван Дрожжин]

Согласен с Максим Тимофеев, проще всего переделать все блоками и задавать стили через медиа запросы.

[GaserV]

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

[GaserV]

Что в таком случае делать? всем колонкам задать фикс. ширину?

[Иван Дрожжин]

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

[Иван Дрожжин]

GaserV: Посмотрите как это применено например в Twitter bootstrap и применив к своему проекту у Вас все получится красиво. Принцип прост.

Answer 3

[Андрей Гончаров]

Верстай дивами. Строка: display: table-row, ячейка: display: table-cell. Теперь блочный html ведет себя как таблица. По медиа-запросу меняем все дивы на display-block.
Вот пример: eleostest.ru/timetable