display: inline-block vs display: table (no display: table-cell)

Question

I have used both of the display properties whenever I wanted the width of an element to be the same as its content.

But is one better than the other? I'm referring to accessibility, browser compatibility, responsiveness, etc.

Note: I am asking because I'm planing to use only one of these in my new web site. I just don't know which one is better, if any.

If you're making a table, then probably use table. I think display:inline-block would be preferable for other use cases — Kevin Jantzer
– Kevin Jantzer, Commented Jan 29, 2018 at 22:22
Why do you want to limit the site to using one or the other? Use what what makes sense in each case. — Brett DeWoody
– Brett DeWoody, Commented Jan 29, 2018 at 22:34
simply read the documentation and understand how each one behave then you will get the cases .. it's like you ask about difference between padding and margin : both add space but not in the same way — Temani Afif
– Temani Afif, Commented Jan 29, 2018 at 22:48
Did you mean display: inline-block vs display: table-cell? — Brett DeWoody
– Brett DeWoody, Commented Jan 29, 2018 at 23:27

Brett DeWoody · Accepted Answer · 2018-01-30 11:53:33Z

2

Ultimately, it depends on the use case:

display: inline-block will create an inline-block element
display: table will create a table element

Here they are in use:

span.mySpan {
  background-color: red;
}

<div>
  <span>A span element.</span>
  <span class="mySpan" style="display: table;">a <code>display: table</code> element.</span>
  <span>Another span element.</span>
</div>

<br/>
<br/>

<div>
  <span>A span element.</span>
  <span class="mySpan" style="display: inline-block;">a <code>display: inline-block</code> element.</span>
  <span>Another span element.</span>
</div>

As can be seen, the results are very different. The table element positions itself on a new line, and causes the next element to be on a new line as well. The inline-block element positions itself inline with it's sibling elements.

In many cases, the above differences will be enough to choose one or the other.

If not, let's continue...

There are some cases when display: table is useful:

Horizontal and vertical centering of elements
Equal height elements

However, browsers can produce inconsistent results when not implemented correctly so you should always couple display: table with the standard table markup (using rows and cells):

.table {
  display: table;
}

.table-row {
  display: table-row:
}

.table-cell {
  display: table-cell;
  background-color: #eaeaea;
  padding: 10px;
}

<div class="table">
  <div class="table-row">
    <div class="table-cell">
      Content
    </div>
    <div class="table-cell"  style="height: 100px;">
      Content
    </div>
    <div class="table-cell">
      Content
    </div>
  </div>
</div>

This becomes pretty tedious. And with modern CSS we can accomplish the same using display: flex, with a simpler HTML structure and less CSS:

.flex {
  display: flex;
}

.flex-cell {
  background-color: #eaeaea;
  padding: 10px; 
}

<div class="flex">
  <div class="flex-cell">
    Content
  </div>
  <div class="flex-cell" style="height: 100px;">
    Content
  </div>
  <div class="flex-cell">
    Content
  </div>
</div>

Honestly, I can't think of many times I would need to decide between display: inline-block and display: table as they produce such different results. However, if I were on the fence I'd follow this decision tree:

Do I need to make a table? Use a true <table></table> element
Do I need equal height/width elements, and/or vertical centering? Use a display: flex element
Otherwise, use the appropriate HTML element (display: inline-block)

edited Jan 30, 2018 at 11:53

answered Jan 29, 2018 at 23:27

Brett DeWoody

63.3k31 gold badges145 silver badges192 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

VorganHaze Over a year ago

Man, that is great! Thank you. One question. In your code, you put the display:table-cell inside a display:table-row. I edited it and put the display:table-cell *directly( under the display:table (deleting the entire table-row) and it renders the same. The table-row is necessary, since I am getting the same result?

Brett DeWoody Over a year ago

The table-row and even the table aren't necessary. It's the table-cell elements doing all the work in that case. But keep in mind browsers produce inconsistent results using that markup.

Alohci Over a year ago

"browsers can produce inconsistent results when not implemented correctly" I call FUD. Can you name a browser that gets this wrong? And especially one that gets it wrong yet implements flexbox.

Stephen P Over a year ago

I have come across a situation where some information made the most sense visually if displayed as a table, but it wasn't tabular data — semantically it was not a table, but it was visually easier to comprehend. In that one case I used display:table and table-row & table-cell. In all other cases go with Brett's answer - if it's a table make it a <table> otherwise don't. IMHO using display:table breaks the "don't use tables for layout" rule.

Alohci Over a year ago

@StephenP - No it doesn't. The reason for the "don't use tables for layout" rule is that HTML tables are reported through accessiblity technology with descriptions of rows and columns that are confusing to their users if the contents of the cells are not tabular data. That doesn't happen with a div element with display:table.

|

Collectives™ on Stack Overflow

display: inline-block vs display: table (no display: table-cell)

1 Answer 1

11 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

11 Comments

Your Answer

Sign up or log in

Post as a guest

Related