Comparing the attributes of inline-block and inline-table, both share an inline outer display role, indicating that
The element creates an inline-level box.
The key difference lies in the fact that
In practice, however, inline-table behaves similarly to inline-block due to the presence of anonymous table objects:
Create missing child wrappers:
- If a child C of a 'table' or 'inline-table' box is not a valid table child, generate an anonymous 'table-row' box around C and
any subsequent siblings of C that are invalid table children.
- If a child C of a 'table-row' box is not a 'table-cell', create an anonymous 'table-cell' box around C and all successive
siblings of C that are not 'table-cell' boxes.
Hence, if your inline-table contains non-tabular content, that content will be encapsulated within an anonymous table-cell.
Furthermore, table-cell shares a flow-root inner display model, akin to inline-block.
However, when the inline-table incorporates tabular content, it diverges from the behavior of inline-block.
Illustrative examples include:
Within an inline-block, cells with non-tabular separators will have distinct table anonymous parents, resulting in separate lines. Conversely, in an inline-table, the separator itself will form a table-cell parent, causing all elements to appear on the same row.
.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>
Internally, cells do not expand to fill a wide inline-block:
.itable {
display: inline-table;
}
.iblock {
display: inline-block;
}
.wrapper {
width: 100%;
}
.cell {
display: table-cell;
border: 1px solid #000;
}
<fieldset>
<legend>inline-table</legend>
<div class="itable wrapper">
<span class="cell">table-cell</span>
</div>
</fieldset>
<fieldset>
<legend>inline-block</legend>
<div class="iblock wrapper">
<span class="cell">table-cell</span>
</div>
</fieldset>
The borders of the inline-block do not merge with those of the inner cells:
.wrapper, .cell {
border-collapse: collapse;
border: 5px solid #000;
}
.itable {
display: inline-table;
}
.iblock {
display: inline-block;
}
.cell {
display: table-cell;
}
<fieldset>
<legend>inline-table</legend>
<div class="itable wrapper">
<span class="cell">table-cell</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="cell">table-cell</span>
</div>
</fieldset>