Как сверстать таблицу дивами?

Question

[kn1ght_t]

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

пробовал парсить высоту через jquery, получилось уже ближе к правде jsfiddle.net/mov8aukj

но все равно немного не то, т.к. высота для всех строчек выбирается исходя из максимального значения высоты строки => получается, что строчки, где мало текста все равно неразумно большие по высоте

может быть, есть какое-то изящное решение без использования js/jquery? или как мне правильно переписать скрипт?

p.s. только не спрашивайте, зачем мне верстать таблицу дивами)

Comments

[Евгений]

ну правда, зачем верстать таблицу дивами?

[Владлен Грачев]

Nc_Soft, потому что DIV'ы — это модно, а таблицами уже никто не верстает.

[kn1ght_t]

Nc_Soft: академический интерес, так скажем

[kn1ght_t]

Влад Гвер: дело тут совсем не в моде

[Евгений]

kn1ght_t: академический интерес или как съесть китайскими палочками суп

[kn1ght_t]

Nc_Soft: jsfiddle.net/mov8aukj/4 в итоге так получилось, не так уж и страшно)

[Евгений]

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

[kn1ght_t]

Nc_Soft: ie 8+, android 4.1 +, ios safari 7.1+, даже опера мини поддерживает, так что не вижу вообще проблем с этим, ие 6-7 поддерживать не вижу смысла

[Евгений]

kn1ght_t: да, просто великолепно с ucweb mini смотрится https://dl.dropboxusercontent.com/u/930651/_/fishi...
с оперы мини получше, но если таблица будет пошире, то ее правый край не увидят, скролла нет, вон надпись про корзину итак уже обрезалась
https://dl.dropboxusercontent.com/u/930651/_/fishi...

[kn1ght_t]

Nc_Soft: так там даже box-sizing: border-box нету, зачем было тестить с мобилы то, что для теста не подготовлено

[Евгений]

kn1ght_t: потому что таблицу бы спокойно отрендерило )))

[kn1ght_t]

Nc_Soft: не понимаю, что мне доказать пытаетесь) то, что мне нужно было, я понял)

Answer 1

[tennalian]

вот тут пример такой таблицы css-tricks.com/css
думаю, ты забыл table-row

Comments

[kn1ght_t]

спасибо, то, что нужно :)

[kn1ght_t]

вот результат: jsfiddle.net/mov8aukj/4 еще раз спасибо :)

[Владлен Грачев]

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

[tennalian]

Влад Гвер: отчасти вы правы, конечно, но так проще подогнать "таблицу" под мобильные, что видно в данном мной примере. Конечно, есть способ попроще, через data атрибуты и css =) правда подходит он не для всех таблиц

[kn1ght_t]

Влад Гвер: так уж ничем и не отличается? можно с медиа-запросами поиграться, например, сделать таблицу адаптивной

Answer 2

[Владлен Грачев]

Не надо верстать таблицу дивами. Таблицы верстаются таблицами.

Максимально приближенный вариант получится, если использовать табличные значения свойства display. И в итоге разметка будет только более громоздкой, ибо вместо соответствующего тега придется использовать див с соответствующим классом. И троллейбус из буханки на фоне этого будет выглядеть куда более полезным изобретением.

Можно накидать и на JS, но все равно выйдет ад и содомия.

Answer 3

[Андрей Васильев]

может попробовать flexbox?
codepen.io/imohkay/pen/gpard
css-tricks.com/fluid-width-equal-height-columns

Comments

[kn1ght_t]

кроссбраузерность страдает

Answer 4

[Михаил]

У вас же глядя на ваш пример получается много таблиц по одной ячейки. Если верно использовать display: table|table-cell и т.д. то всё будет работать так как вы говорите. Либо вы не совсем ясно описали проблему

Answer 5

[fisherok]

<div class="divTable">
<div class="divTableBody">
<div class="divTableRow">
<div class="divTableCell">&nbsp;</div>
<div class="divTableCell">&nbsp;</div>
<div class="divTableCell">&nbsp;</div>
<div class="divTableCell">&nbsp;</div>
<div class="divTableCell">&nbsp;</div>
</div>
<div class="divTableRow">
<div class="divTableCell">&nbsp;</div>
<div class="divTableCell">&nbsp;</div>
<div class="divTableCell">&nbsp;</div>
<div class="divTableCell">&nbsp;</div>
<div class="divTableCell">&nbsp;</div>
</div>
</div>
</div>

.divTable{
	display: table;
	width: 100%;
}
.divTableRow {
	display: table-row;
}
.divTableHeading {
	background-color: #EEE;
	display: table-header-group;
}
.divTableCell, .divTableHead {
	border: 1px solid #999999;
	display: table-cell;
	padding: 3px 10px;
}
.divTableHeading {
	background-color: #EEE;
	display: table-header-group;
	font-weight: bold;
}
.divTableFoot {
	background-color: #EEE;
	display: table-footer-group;
	font-weight: bold;
}
.divTableBody {
	display: table-row-group;
}