CSS: display: block; vs display: table;

Ответ 1

Сравнивая два (блок и таблицу), я не знаю никаких основных различий (могут быть и незначительные), которые вы увидите в вакууме. Я считаю, что основные различия в особенности относятся к детям. Таблицы и их дети имеют очень разные атрибуты/отношения, чем div и дети.

Что касается inline-block и inline-table: В чем разница между встроенным блоком и встроенной таблицей?

В этой статье (http://css-tricks.com/almanac/properties/d/display/) содержится некоторая интересная информация, в частности, касающаяся всех свойств отображения, связанных с таблицей.

Ответ 2

Я изучал это сегодня, и я нашел этот раздел спецификации CSS полезным: http://www.w3.org/TR/CSS21/tables.html#model

Следует отметить, что

таблица генерирует основной блок-блок, называемый полем обертки таблицы который содержит сам стол таблицы и любые поля надписи (в документе заказ). Поле таблицы представляет собой блок-уровень, в котором содержится таблица внутренние таблицы.

Как я понимаю, это означает, что браузер генерирует невидимый контейнерный блок для чего-либо с display: table!

Ответ 3

Оба будут блочными, поскольку они не будут отображаться рядом с чем-либо еще по умолчанию.

Существует значительная разница в фактическом отображении элемента. display: block; будет распространяться на 100% доступного пространства, а display: table; будет только шириной его содержимого.

Кроме того, как отмечали другие, display: table; требуется для получения display: table-cell; или другого материала table- для работы в потомках.

Я знаю только это, потому что я просто столкнулся с проблемой попыток получить display: table; для заполнения ширины контейнера. Я не смог увидеть, есть ли разница в отображении display: inline; и display: inline-table;.

https://jsfiddle.net/nnbonhc6/

Ответ 4

Одним из основных преимуществ использования display: table вместо display: block в родительском элементе является то, что вы можете безопасно использовать display: inline-block для дочерних элементов, не беспокоясь о пробеле между дочерними элементами.

В противном случае вам придется избавиться от этого лишнего пробела, используя комментарии html между тегами закрытия/открытия (например, с несколькими элементами <li> для типичного горизонтального nav) или помещением всего в строку ваш код без возврата несущей (который является кошмаром для редактирования).

Ответ 5

Существует одна разница, которая, по-видимому, существует, заключается в том, что display:table очищает строку (как display:block), но не расширяется, чтобы заполнить строку (блок отображения будет принимать максимальный размер ширины, встроенный не будет)

Таким образом, вы можете получить поле, которое изменяет размер вашего контента, но остается в его "строке"

Ответ 6

Недавно я нахожу еще один пример разницы между display: block и display: table

Я беру шаблон письма из лакмуса:

<table class="row footer">
  <tbody>
    <tr>
      <td class="wrapper">

        <table class="six columns">
          <tbody><tr>
            <td class="left-text-pad">

              <h5>Connect With Us:</h5>

              <table class="tiny-button facebook">
                <tbody><tr>
                  <td>
                    <a href="#">Facebook</a>
                  </td>
                </tr>
              </tbody></table>

              <br>

              <table class="tiny-button twitter">
                <tbody><tr>
                  <td>
                    <a href="#">Twitter</a>
                  </td>
                </tr>
              </tbody></table>

              <br>

              <table class="tiny-button google-plus">
                <tbody><tr>
                  <td>
                    <a href="#">Google +</a>
                  </td>
                </tr>
              </tbody></table>

            </td>
            <td class="expander"></td>
          </tr>
        </tbody></table>

      </td>
      <td class="wrapper last">

        <table class="six columns">
          <tbody><tr>
            <td class="last right-text-pad">
              <h5>Contact Info:</h5>
              <p>Phone: 408.341.0600</p>
              <p>Email: <a href="mailto:[email protected]">[email protected]</a></p>
            </td>
            <td class="expander"></td>
          </tr>
        </tbody></table>

      </td>
    </tr>
  </tbody>
</table>

с display: block !important; в таблице нижнего колонтитула, он выглядит:

с display: table !important; в таблице нижнего колонтитула, выглядит:

Снимок сделан с почтовым приложением на iOS 10.0.1.

Ответ 7

Дополнительно: на тему wordpress со сложным CSS, в котором были конфликтующие эффекты в специальной области класса, я просто не мог получить эту область в центре из-за конфликтов CSS. В конце концов, единственный способ получить эту часть по центру - это переключить ее с экрана: встроенный блок для отображения: table, а затем, наконец, он принял правила центрирования, будь то выравнивание по тексту или маржа: 0 auto.

Я не утверждаю, что мой случай статистически значим, просто предоставляя отзыв личного опыта, в случае, если другие люди в подобном бедствии спотыкаются на эту страницу после веб-поиска:)

Ответ 8

По сути, display: inline-block позволяет элементам располагаться друг над другом без каких-либо медиа-запросов. Если вы установите элементы для отображения: table-cell, вы не сможете изменить их расположение без использования медиазапроса.

Ответ 9

есть еще одно различие, которое я обнаружил между display:block и display:table в том, что, когда любой из них имеет position:fixed, top:0, left:0, right:0, bottom:0, overflow:auto, если содержимое превышает область просмотра, display:block will покажет полосу прокрутки, а display:table не