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

Ответ 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-block имеет flow-root внутренняя модель отображения, то есть

  Элемент создает контейнер block container и выдает его с использованием макета потока. Он всегда устанавливает новый блок контекст форматирования для его содержимого.

• inline-table имеет table внутренняя модель отображения, то есть

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

Однако в большинстве случаев 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>
-