What is the difference between inline-block and inline-table?

Here are relevant differences in practice. Run the code snippet to see it at first glance.

Vertical alignment of surrounding text:
inline-table elements align with its top cell or top baseline (if content is only multiple lines of text).
Text around inline-box aligns with its bottom.
height works different, e.g. heightis probably not as you expect on
<table style=display:inline-block> (see test5 and 6)
width and overflow works different,
e.g. setting width smaller than content, see test7, 8, 9, 10

<style>
     table, span { background:gold; color:red }
     th, td { background:silver }
</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:5em>
       <tr><th> inline
       <tr><td> block
     </table>
_test6
     <table style=display:inline-table;height:5em>
       <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>_

Both inline-block and inline-table have an inline outer display role. That means

The element generates an inline-level box.

The difference is that

inline-block has a flow-root inner display model, that is

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.
inline-table has a table inner display model, that is

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.

And table-cell has a flow-root inner display model, just like inline-block.

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;
}

<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>

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;
}

<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 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;
}

<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>

display:table will make your tag behave like a table. inline-table just means that the element is displayed as an inline-level table. You can then do table-cell to let your element behave like a <td> element.

display:inline - displays your element as an inline element (like <span>), and inline-block will just group them together in a block container.

As the other answer suggested you can replace between the two as long as you follow the display convention in the rest of your code. (i.e. use table-cell with inline-table and not with inline-block).
Check this link for more info on display.

What is the difference between inline-block and inline-table?

Tags:

Html

Css

Related

Recent Posts