Этой заметкой я хочу заглянуть в будущее, которое, надеюсь, будет не очень отдалённым. В будущее — потому что IE7 не поддерживает табличные значения свойства display, а с арены пока не сошёл.
Адекватной замены табличным свойствам, которая работала бы в IE7, на данный момент не существует. Многочисленные способы сымитировать табличные элементы на плавающих блоках дают весьма приблизительный результат и не гарантируют устойчивости, свойственной табличным элементам.
Display: table
Означает: «веди себя как таблица». По умолчанию этим значением обладает html-элемент table, он же таблица.
Поведение, типичное для таблицы: Читать полностью »
70 комментариев на «Табличные значения display: table, table-cell, table-row, table-column, и другие»
Димар (1 комментарий)
Добрый день!
я только учусь блочной верстке и у меня возникла проблема при вертикальном выравнивании.
Если родительскому блоку делаю display:table-cell, то весь текст, внутри него, по вертикали выравнивается как надо. но сам блок изменяется — у него как будто сразу удаляются margin padiing и пр. параметры. в чем проблема и как это решается?
Княгиня (660 комментариев)
Здравствуйте.
У блоков с display:table-cell марджины пропадают обязательно, об этом и в моей заметке сказано. А padding пропадать не должен, проверьте, есть ли он у них вообще. И её раз внимательно перечтите описание элементов с этим значением.
Аноним
с вашего позволения спрошу конкретнее
ВОТ КОД:
zagolovok menu
content menu
div {width:300px;}
#zagolovok {outline:1px solid red;display:table-cell;}
#content {height:300px;outline:1px solid green; margin-top:10px;}
цель: между ними сделать зазор 10 пикселей, причем верхний блок-ячейка.
мою голову посетили лишь две идеи: 1) в указанном мною коде, нижнему блоку я сделал марджин топ 10, но что делать если нижний блок тоже придется делать ячейкой? следственно способ отпадает
2) между двумя блоками создать 3-ий блок высотой 10 пикс, но тоже не устраивает — опять нагромождение дополнительными дивами.
как бы сделали вы? можете написать если не трудно?
p.s. чтоб мне не загрязнять тут комментарии, можете ответить по маилу?
Княгиня (660 комментариев)
Ну, это загрязнением не будет. Но из текста неясно, что у вас за html. В любом случае, проблема отступов решается padding’ом. Или же, если у ваших блоков есть фон, отличный от основного, рамкой цвета основного фона. Рамка может быть и прозрачной, только убедитесь сначала, что в ИЕ7 и в Опере она действительно прозрачная.
SelenIT (6 комментариев)
Когда блоку командуют «веди себя как ячейка таблицы», браузер вынужден создать вокруг него две анонимные обертки — имитирующие саму таблицу и строку таблицы соответственно (не может же ячейка таблицы жить сама по себе, в отрыве от таблицы, хотя бы «полувиртуальной»). А у этих анонимных оберток все поля и отступы нулевые (по умолчанию), вот мы их и не видим.
Княгиня (660 комментариев)
Строго говоря, и в обычной таблице браузер создаёт невидимую обёртку tbody.
Но в данном случае дело не в обёртках, а в том, что самому блоку не хватает отступов (padding).
SelenIT (6 комментариев)
Еще строже говоря, tbody, создаваемый в обычной таблице — обертка вполне себе видимая: этот элемент честно присутствует в DOM и, соответственно, виден в любом DOM-инспекторе типа firebug-а. А анонимные CSS-боксы (в т.ч. табличные) не видны даже там и обнаруживаются исключительно по косвенным признакам типа исчезнувших margin-ов.
Вот с padding-ами, да, моя невнимательность, на них анонимные обертки влиять и впрямь не должны.
Миша (1 комментарий)
Как на меня, уже не надо заточивать сайты для екплорера 6,7.
SelenIT (6 комментариев)
Табличные свойства отображения позволяют тривиальнейшим образом решить нерешаемую задачу «прижатый подвал заранее неизвестной высоты»: http://silverflame.at.tut.by/sticky1.html :). Если абстрагироваться от архаичных IE (с их теперешними <6%, думаю, уже можно скопом отправлять их на принудительную изящную деградацию), выходит вполне универсально…
Княгиня (660 комментариев)
Прекрасное решение, и никакого позиционирования не надо. Дело за малым: отделаться от седьмого IE. Я, признаться, подумываю: не пора ли мне подобным образом прооперировать собственный блог, но пока не раскачалась.
Кросс (1 комментарий)
Почему в Опере рамка не появляется?
Княгиня (660 комментариев)
У кого не появляется и в каких условиях?
Влад (9 комментариев)
Княгиня, а можете кинуть ссылочку на какую-нибудь интересную страницу, которая сверстана с множественным применением Display: table-**** ?
Я просто собственноручно никогда не использовал сам такие значения для свойства Display, интересно было бы на ощупь опробовать это на последних версиях браузеров. (Подписался на всякий случай на ваши рассылки и комментарии)
Княгиня (660 комментариев)
Интересную да c множественным не назову. По-моему, в рунете применение табличных значений вообще редкость. У нас идёт идеологическая борьба между таблицами и флоутами, что весьма смешно, ведь использование флоутов для имитации колонок не соответствует спецификациям css, то есть, так же идеологически неверно, как и использование таблиц для размётки страницы.
Могу привести собственный скромный пример вёрстки на табличных свойствах: rusimages.ru/works/cs/. Три колонки, как обычно.
Влад (9 комментариев)
Княгиня, да я спросил так, ради интереса, чтобы глянуть как кто-нибудь верстает с использованием Display: table-****
Мне самому не нравится табличная верстка, с DIV-версткой мне как-то проще и более понятно
Княгиня (660 комментариев)
Я предпочитаю комбинированную. Просто потому, что таблица с тремя ячейками даёт стабильную колоночную структуру. А флоуты требуют подпорок и не дают гарантий. Блочная с применением табличных значений display — самое правильное, если бы не ИЕ7. Приведённый мной пример предназначен для сайта с продвинутыми пользователями: предполагается, что среди них почти нет иешников.
Влад (9 комментариев)
А, ну конечно, согласен, довольно часто несложную форму и прочее конечно легче и быстрее состряпать на таблицах.
Княгиня (660 комментариев)
Тут главное знать, что лучше делать таблицей, а что блоками (и какими именно). Это же инструменты: где-то удобнее топор, где-то пила. А где-то вообще напильник требуется.
Влад (9 комментариев)
В точку, Княгиня, точь-в-точь! Но как правило преобладает метод «напильника» (для меня например)
Княгиня (660 комментариев)
Напильники тоже бывают разные. А ещё порой требуется надфиль, наждачка или абразивчик.
С правильным размером зерна.
Логотип (1 комментарий)
ie жутко отстает и вымре через 5 лет если майк не займется!
Княгиня (660 комментариев)
Те, кто пробовал ИЕ9, другого мнения на этот счёт. (Я пока не пробовала.)
pardner (1 комментарий)
Не стоит уже смотреть на експлорер 7. Вымрет он уже скоро.