What is the difference between inline-block and inline-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>