html inline-table,html - What is the difference between inline-block and inline-table? - Stack Overf...

The element generates an inline-level box.

The difference is that

The element generates a block container box, and lays out its

contents using flow layout. It always establishes a new block

formatting context for its contents.

The element generates a principal table wrapper box containing an

additionally-generated table box, and establishes a table

formatting context.

However, in most cases, inline-table will behave like inline-block because of anonymous table objects:

Generate missing child wrappers:

If a child C of a 'table' or 'inline-table' box is not a proper table child, then generate an anonymous 'table-row' box around C and

all consecutive siblings of C that are not proper table children.

If a child C of a 'table-row' box is not a 'table-cell', then generate an anonymous 'table-cell' box around C and all consecutive

siblings of C that are not 'table-cell' boxes.

Therefore, if your inline-table element has non-tabular content, that content will be wrapped in an anonymous table-cell.

But if the inline-table has tabular content, it will behave differently than inline-block.

Some examples:

Inside an inline-block, cells with non-tabular separator will generate different table anonymous parents, so they will appear at different lines. Inside an inline-table, it will be the separator who will generate a table-cell parent, so they all will appear at the same row.

.itable {

display: inline-table;

}

.iblock {

display: inline-block;

}

.cell {

display: table-cell;

}

.wrapper > span {

border: 1px solid #000;

padding: 5px;

}

inline-table

table-cell

inline-block

table-cell

inline-block

table-cell

inline-block

table-cell

Inner cells won't grow 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;

}

inline-table

table-cell

inline-block

table-cell

The border of the inline-block won't collapse with the border 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;

}

inline-table

table-cell

table-cell

inline-block

table-cell

table-cell