В чем разница между встроенным блоком и встроенной таблицей?

Насколько я могу судить, эти селектора display кажутся одинаковыми.

Из документации Mozilla CSS:

inline-table: значение inline-table не имеет прямого отображения в HTML. Он ведет себя как элемент <table> HTML, а как встроенный блок, а не блок-уровень. Внутри таблицы таблицы находится контекст уровня блока.

inline-block: Элемент генерирует поле блока элементов, которое будет передаваться с окружающим контентом, как если бы это был единственный встроенный блок (ведение себя подобно замененному элементу).

Кажется, что все, что можно сделать с помощью inline-table, можно сделать с помощью inline-block.

ОТВЕТЫ

Ответ 1

display:table заставит ваш тег вести себя как таблица. inline-table просто означает, что элемент отображается как таблица inline-level. Затем вы можете сделать table-cell чтобы ваш элемент вел себя как элемент <td>.

display:inline - отображает ваш элемент как встроенный элемент (например, <span>), а inline-block просто сгруппирует их вместе в контейнер блока.

Как и предполагал другой ответ, вы можете заменить их, если соблюдаете правила отображения в остальном коде. (т.е. используйте table-cell со inline-table а не со inline-block).
Проверьте эту ссылку для получения дополнительной информации на display.

Ответ 2

Оба inline-block и inline-table имеют inline роль внешнего отображения. Это означает

Элемент генерирует окно встроенного уровня.

Отличие состоит в том, что

Однако в большинстве случаев inline-table будет вести себя как inline-block из-за анонимных объектов таблицы:

Создать отсутствующие дочерние обертки:

  • Если дочерний элемент C таблицы 'table' или 'inline-table' не является надлежащим дочерним элементом таблицы, тогда создайте анонимный столбец 'table-row' вокруг C и все последовательные братья и сестры C, которые не являются правильными детьми таблицы.
  • Если дочерний C поля "таблица-строка" не является "табличной ячейкой", затем генерирует анонимную ячейку "table-cell" вокруг C и все последовательные братья и сестры C, которые не являются ячейками "table-cell".

Поэтому, если ваш элемент inline-table имеет не-табличный контент, этот контент будет завернут в анонимный table-cell.

И table-cell имеет flow-root внутренняя модель дисплея, как и inline-block.

Но если inline-table имеет табличное содержимое, он будет вести себя иначе, чем inline-block.

Некоторые примеры:

  • Внутри inline-block ячейки с небабулярным разделителем будут генерировать разные анонимные родители table, поэтому они будут отображаться в разных строках. Внутри inline-table это будет разделитель, который сгенерирует родительский элемент table-cell, поэтому все они будут отображаться в одной строке.

    .itable {
  display: inline-table;
}
.iblock {
  display: inline-block;
}
.cell {
  display: table-cell;
}
.wrapper > span {
  border: 1px solid #000;
  padding: 5px;
}
    <fieldset>
  <legend>inline-table</legend>
  <div class="itable wrapper">
    <span class="cell">table-cell</span>
    <span class="iblock">inline-block</span>
    <span class="cell">table-cell</span>
  </div>
</fieldset>
<fieldset>
  <legend>inline-block</legend>
  <div class="iblock wrapper">
    <span class="cell">table-cell</span>
    <span class="iblock">inline-block</span>
    <span class="cell">table-cell</span>
  </div>
</fieldset>

Ответ 3

Вот соответствующие различия на практике. Запустите фрагмент кода, чтобы увидеть его на первый взгляд.

  • Вертикальное выравнивание окружающего текста:
    элементы inline-table выравниваются по его верхней ячейке или верхней базовой линии (если содержимое состоит только из нескольких строк текста).
    Текст вокруг inline-box выравнивается по его низу.
  • height работает по-разному, например, height, вероятно, не так, как вы ожидаете на
    <table style=display:inline-block> (см. test5 и 6)
  • width и переполнение работает по-разному,
    например, настройка ширины меньше содержимого, см. test7, 8, 9, 10

<style> table, span { background:orange } th, td { background:beige } </style>
test1
     <span style=display:inline-block> 
       display <br> inline <br> block
     </span>
test2
     <span style=display:inline-table>
       display <br> inline <br> table
     </span>
test3
     <table style=display:inline-block>
       <tr><th> inline
       <tr><td> block
     </table>
test4
     <table style=display:inline-table>
       <tr><th> inline
       <tr><td> table
     </table>
test5
     <table style=display:inline-block;height:6em>
       <tr><th> inline
       <tr><td> block
     </table>
test6
     <table style=display:inline-table;height:6em>
       <tr><th> inline
       <tr><td> table
     </table>-
<br>
test7
     <span style=display:inline-block;width:1.4em>
       block
     </span>
test8
     <span style=display:inline-table;width:1.4em>
       table
     </span>
test9
     <table style=display:inline-block;width:1.4em>
       <tr><th> inline
       <tr><td> block
     </table>
test10
     <table style=display:inline-table;width:1.4em>
       <tr><th> inline
       <tr><td> table
     </table>
test11
     <table style=display:inline-block;width:5em>
       <tr><th> inline
       <tr><td> block
     </table>
test12
     <table style=display:inline-table;width:5em>
       <tr><th> inline
       <tr><td> table
     </table>
-