Эмуляция таблицы или почему растягиваются ячейки

[only_dimon]

Доброго времени суток.

Объектом моих неоднократных мучений является эмуляция таблицы. (важно! не использовать JS)

Зачем мне так нужна таблица?

1. Вертикальное выравнивание, когда высота выравниваемого объекта неизвестна. (то есть трюк с отрицательным margin-top не пройдет)

2. Вот такое меню с гибким составом элементов: http://screenshot.su...b9d38b5d5e9.jpg (растягивающееся на всю ширину сайта меню, размеры элементов зависят от размера контента).

С первым кое-как разобраться можно. display: table-cell и expression для IE lt 9.

Со вторым проблемы.

При верстке дивами, размер блока (float или inline-block) будет равен размеру контента, но не более. Таким образом у меня элементы всю область h-menu не заполнят. Когда набор элементов меню гибкий, прописывать паддинг или задавать точные размеры блокам, тоже не покатит. Процентная ширина элементов не будет зависеть от контента элемента.

В случае с таблицей ширина элементов table-cell растягивается относительно своего контента так, чтобы заполнить всего родителя. Буду очень признателен, если тыкнете носом в инфу, почему так происходит и как это поведение без js и без table-cell эмулировать. (table-cell не хочу использовать, так как возникают траблы с раскрывающимся css меню. в FF, например, для table-cell позиция не работает как надо)

Вот фиддл http://jsfiddle.net/only_dimon/KSwA2/

Нужно сделать так, чтобы элементы заполнили всю черную область (родителя), были разного размера в зависимости от размера содержимого (текста) и, чтобы выпадающее меню в FireFox могло выравниваться относительно родителя.

Спасибо всем, кто просветит меня в этом вопросе.

P.S. JS не подходит еще и потому, что неверно рассчитывает размер элементов, когда шрифт нестандартный подключается. Шрифт подгрузиться не успевает до запуска скрипта.

Edited April 25, 2013 by only_dimon

[Great Rash]

(важно! не использовать JS)

и потом сразу:

и expression для IE lt 9.

Вы в курсе, что expression - это тоже JS? Т.е. если юзер отключит вдруг скрипты, то expression тоже работать не будет.

В общем прекратите извращаться и используйте таблицу. Напишите ей role="presentation", чтобы ваша совесть была совсем чиста и начальство не нервничало. [дальше идет шутка про Вилларибо и Виллабаджо]

[only_dimon]

Вы в курсе, что expression - это тоже JS? Т.е. если юзер отключит вдруг скрипты, то expression тоже работать не будет.

Да, именно поэтому первый пункт тоже включил, как не решенный окончательно.

В общем прекратите извращаться и используйте таблицу.

Посмотрите вот этот пример в FF http://jsfiddle.net/only_dimon/KSwA2/2/

Чтобы сделать выравнивание выпадающего списка относительно родителя, придется помещать еще div в каждую ячейку, а в этом диве еще <a> для перехода к страницам. Получаем лесенку table-tbody-tr-td-div-a. Не очень мне такое нравится. Если способов эмулировать таблицу чистым CSS не существует, тыкнете носом, пожалуйста, в источник

[Great Rash]

Ах вам не нравится видеть в коде лесенку table-tbody-tr-td-div-a, на которую юзеру плевать и которую он не увидит никогда. Вы хотите знать, что у вас "красивый" HTML, а юзер пусть помучается с експрешнами, ведь это небольшая цена за то чтобы знать, что у вас "красивый" код. Тогда вопросов и предложений больше не имею.

[only_dimon]

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

P.S. Зачем Вы злитесь. Когда возникает техническое противоречие надо стараться искать способ, который не требует компромиссов. В данном случае, не важно с какой стороны: соответствия дизайну, отказоустойчивости, скорости, удобочитаемости кода и индексации.

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

P.P.S Плохо, когда отключенный JS ломает верстку или нарушает функциональность. При грамотном greaceful degradation можно так сверстать, чтобы и без вертикального выравнивания при отключении JS нормально выглядело. На функциональность эта оформительская вещь вообще не влияет.

Edited April 25, 2013 by only_dimon

[Great Rash]

Поправьте меня, если я заблуждаюсь.

Вы заблуждаетесь.

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

<div class="table">
	<div class="table-row">
		<div class="table-cell">
			<div class="content">data</div>
		</div>
	</div>
</div>

<table role="presentation">
	<tr>
		<td>
			<div class="content">data</div>
		</td>
	</tr>
</table>

Вот чем эти два кода отличаются?

[only_dimon]

Дивами не будет заполнения по ширине родителя.

И немного не так вы код написали.

<div class="table">
    <div class="table-cell">data</div>
</div>

<table role="presentation">
	<tr>
		<td>
			<div class="content">data</div>
		</td>
	</tr>
</table>

По мне - сильно отличаются.

Edited April 25, 2013 by only_dimon

[Great Rash]

Я написал код так как он должен быть если мы эмулируем таблицу. Опускать display: table-row; неправильно, мы же стремимся к идеальному коду так?

[only_dimon]

То бишь без display: table / table-row / table-cell не выйдет?

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

В том и дело, что ищу способ научить дивы поведению табличных элементов без описанных выше свойств.

Ячейки таблицы автоматически высчитывают ширину по какой-то мне неведомой формуле.

Интересует, есть ли способ сэмулировать этот расчет ширины.

Edited April 25, 2013 by only_dimon

[Great Rash]

То бишь без display: table / table-row / table-cell не выйдет?

Выйдет, table-row можно опустить. Если у вас только одна строка.

В том и дело, что ищу способ научить дивы поведению табличных элементов без описанных выше свойств.

Такого способа нет. Только скриптами, причем алгоритм высчитывания ширины ячейки очень нетривиален. Нечто подобное предоставляет flex-box, но там с кроссбраузерностью вообще худо.

Ячейки таблицы автоматически высчитывают ширину по какой-то мне неведомой формуле.

Интересует, есть ли способ сэмулировать этот расчет ширины.

Формула есть в спецификации

[only_dimon]

Ясно, спасибо.

Убил еще пару часов на поиски аналогов flush space для html, но так и не нашел ничего.

[rus]

не оно?