Табличные значения display: table, table-cell, table-row, table-column, и другие (страница комментариев 3)

10 октября 2011. Рубрики: Рабочие заметки; автор — Юлия Панина aka Княгиня.

Этой заметкой я хочу заглянуть в будущее, которое, надеюсь, будет не очень отдалённым. В будущее — потому что IE7 не поддерживает табличные значения свойства display, а с арены пока не сошёл.

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

Display: table

Означает: «веди себя как таблица». По умолчанию этим значением обладает html-элемент table, он же таблица.

Поведение, типичное для таблицы: Читать полностью »

Отзывы (69) на «Табличные значения display: table, table-cell, table-row, table-column, и другие»
  1. Димар (1 комментарий)

    Добрый день!
    я только учусь блочной верстке и у меня возникла проблема при вертикальном выравнивании.
    Если родительскому блоку делаю display:table-cell, то весь текст, внутри него, по вертикали выравнивается как надо. но сам блок изменяется — у него как будто сразу удаляются margin padiing и пр. параметры. в чем проблема и как это решается?

    Ответить на этот комментарий
    • Княгиня (655 комментариев)

      Здравствуйте.
      У блоков с 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. чтоб мне не загрязнять тут комментарии, можете ответить по маилу?

        Ответить на этот комментарий
        • Княгиня (655 комментариев)

          Ну, это загрязнением не будет. Но из текста неясно, что у вас за html. В любом случае, проблема отступов решается padding’ом. Или же, если у ваших блоков есть фон, отличный от основного, рамкой цвета основного фона. Рамка может быть и прозрачной, только убедитесь сначала, что в ИЕ7 и в Опере она действительно прозрачная.

          Ответить на этот комментарий
    • SelenIT (6 комментариев)

      Когда блоку командуют «веди себя как ячейка таблицы», браузер вынужден создать вокруг него две анонимные обертки — имитирующие саму таблицу и строку таблицы соответственно (не может же ячейка таблицы жить сама по себе, в отрыве от таблицы, хотя бы «полувиртуальной»). А у этих анонимных оберток все поля и отступы нулевые (по умолчанию), вот мы их и не видим.

      Ответить на этот комментарий
      • Княгиня (655 комментариев)

        Строго говоря, и в обычной таблице браузер создаёт невидимую обёртку tbody. :) Но в данном случае дело не в обёртках, а в том, что самому блоку не хватает отступов (padding).

        Ответить на этот комментарий
        • SelenIT (6 комментариев)

          Еще строже говоря, tbody, создаваемый в обычной таблице — обертка вполне себе видимая: этот элемент честно присутствует в DOM и, соответственно, виден в любом DOM-инспекторе типа firebug-а. А анонимные CSS-боксы (в т.ч. табличные) не видны даже там и обнаруживаются исключительно по косвенным признакам типа исчезнувших margin-ов.

          Вот с padding-ами, да, моя невнимательность, на них анонимные обертки влиять и впрямь не должны.

          Ответить на этот комментарий
  2. Миша (1 комментарий)

    Как на меня, уже не надо заточивать сайты для екплорера 6,7.

    Ответить на этот комментарий
  3. SelenIT (6 комментариев)

    Табличные свойства отображения позволяют тривиальнейшим образом решить нерешаемую задачу «прижатый подвал заранее неизвестной высоты»: http://silverflame.at.tut.by/sticky1.html :). Если абстрагироваться от архаичных IE (с их теперешними <6%, думаю, уже можно скопом отправлять их на принудительную изящную деградацию), выходит вполне универсально…

    Ответить на этот комментарий
    • Княгиня (655 комментариев)

      Прекрасное решение, и никакого позиционирования не надо. Дело за малым: отделаться от седьмого IE. Я, признаться, подумываю: не пора ли мне подобным образом прооперировать собственный блог, но пока не раскачалась.

      Ответить на этот комментарий
  4. Кросс (1 комментарий)

    Почему в Опере рамка не появляется?

    Ответить на этот комментарий
    • Княгиня (655 комментариев)

      У кого не появляется и в каких условиях?

      Ответить на этот комментарий
  5. Влад (9 комментариев)

    Княгиня, а можете кинуть ссылочку на какую-нибудь интересную страницу, которая сверстана с множественным применением Display: table-**** ?
    Я просто собственноручно никогда не использовал сам такие значения для свойства Display, интересно было бы на ощупь опробовать это на последних версиях браузеров. (Подписался на всякий случай на ваши рассылки и комментарии)

    Ответить на этот комментарий
    • Княгиня (655 комментариев)

      Интересную да c множественным не назову. По-моему, в рунете применение табличных значений вообще редкость. У нас идёт идеологическая борьба между таблицами и флоутами, что весьма смешно, ведь использование флоутов для имитации колонок не соответствует спецификациям css, то есть, так же идеологически неверно, как и использование таблиц для размётки страницы.

      Могу привести собственный скромный пример вёрстки на табличных свойствах: rusimages.ru/works/cs/. Три колонки, как обычно.

      Ответить на этот комментарий
      • Влад (9 комментариев)

        Княгиня, да я спросил так, ради интереса, чтобы глянуть как кто-нибудь верстает с использованием Display: table-****
        Мне самому не нравится табличная верстка, с DIV-версткой мне как-то проще и более понятно :)

        Ответить на этот комментарий
        • Княгиня (655 комментариев)

          Я предпочитаю комбинированную. Просто потому, что таблица с тремя ячейками даёт стабильную колоночную структуру. А флоуты требуют подпорок и не дают гарантий. Блочная с применением табличных значений display — самое правильное, если бы не ИЕ7. Приведённый мной пример предназначен для сайта с продвинутыми пользователями: предполагается, что среди них почти нет иешников.

          Ответить на этот комментарий
          • Влад (9 комментариев)

            А, ну конечно, согласен, довольно часто несложную форму и прочее конечно легче и быстрее состряпать на таблицах.

            Ответить на этот комментарий
            • Княгиня (655 комментариев)

              Тут главное знать, что лучше делать таблицей, а что блоками (и какими именно). Это же инструменты: где-то удобнее топор, где-то пила. А где-то вообще напильник требуется.

              Ответить на этот комментарий
              • Влад (9 комментариев)

                В точку, Княгиня, точь-в-точь! Но как правило преобладает метод «напильника» (для меня например) :)

                Ответить на этот комментарий
                • Княгиня (655 комментариев)

                  Напильники тоже бывают разные. А ещё порой требуется надфиль, наждачка или абразивчик. :) С правильным размером зерна.

                  Ответить на этот комментарий
  6. Логотип (1 комментарий)

    ie жутко отстает и вымре через 5 лет если майк не займется!

    Ответить на этот комментарий
    • Княгиня (655 комментариев)

      Те, кто пробовал ИЕ9, другого мнения на этот счёт. (Я пока не пробовала.)

      Ответить на этот комментарий
  7. pardner (1 комментарий)

    Не стоит уже смотреть на експлорер 7. Вымрет он уже скоро. =)

    Ответить на этот комментарий

Есть что сказать? Не молчим!

Используйте теги: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" code=""> <ul> <li> <ol> .

Комментарии короче 200 символов публикуются без активной ссылки. Пробелы не учитываются.

Ссылки с комментариев dofollow. Ознакомьтесь, пожалуйста, с правилами dofollow-комментирования. Кто не читает, тот сам себе враг.