26

Is there a difference between display:block; and display:table;? It looks to me like the display type of the dom-node containing table-row and table-cell nodes doesn't matter. MDN says that display:table; makes it behave like a table, but doesn't elaborate on what that behavior is. What is that behavior?

Similarly, is there a difference between display:inline-block; and display:inline-table;?

0

9 Answers 9

14

Both will be block-level, in that they won't display next to anything else, by default.

There is a significant difference in the actual display of the element. display: block; will extend to 100% of the available space, while display: table; will only be as wide as its contents.

Also, as others have mentioned, display: table; is required to get display: table-cell; or other table- stuff to work in the descendents.

I only know this because I just ran into the problem of trying to get the display: table; to fill the width of the container. I haven't been able to see if there is a difference in the display of display: inline; and display: inline-table;.

https://jsfiddle.net/nnbonhc6/

1
  • 2
    As someone else noted below, another difference is that overflow: auto/overflow: scroll does not work on tables. I wanted to have scrollbars without wrapping the table in a div (as my tables are coming from Markdown), though. Setting table { display: block; overflow-x: auto; } solved the scrolling but prevented me from horizontally centering tables that don't span the full width with margin: 0 auto; due to what you described. After some searching, I found that max-width: [-webkit-|-moz-]fit-content on the display: block table does the trick. Commented Jun 18, 2020 at 13:17
10

Comparing the two (block and table), I don't know of any core differences (there may be minor ones) you would see within a vacuum. I believe the major differences are specifically to children. Tables and their children have very different attributes/relationships than a div and its children.

As far as inline-block and inline-table see: What is the difference between inline-block and inline-table?

This article (http://css-tricks.com/almanac/properties/d/display/) has some interesting information, specifically regarding all the different display properties related to a table.

2
  • 1
    One of the other answers makes it a lot more clear what it means to "behave like a table". A couple of the major differences I'm seeing is that elements with some children that are and some children that aren't table-rows, work differently depending on whether its display:table or display:block. Thanks!
    – B T
    Commented Jul 31, 2014 at 0:28
  • -1 for overlooking the fact that display: block takes up 100% of available width, whereas display: table is only as wide as its contents require. That's not a minor difference: in many cases it completely changes the layout of the page.
    – Will
    Commented Dec 27, 2020 at 3:41
7

I was researching this today, and I found this section of the CSS spec to be helpful: http://www.w3.org/TR/CSS21/tables.html#model

Notably,

the table generates a principal block box called the table wrapper box that contains the table box itself and any caption boxes (in document order). The table box is a block-level box that contains the table's internal table boxes.

As I understand it, this essentially means the browser generates an invisible container block for anything with display: table!

1
  • 1
    That's a good point! It will have obvious impact when table is used as a "flex" child: in that case its principal block box will be explicit!
    – Robert
    Commented Sep 29, 2019 at 0:47
7

One difference that seems to exist is that display:table clears the line (as a display:block would) but does not expand to fill the line (a display block would take the maximum amount of width, an inline would not)

So you can get a box that resizes with your content, but stays alone in its "line"

4

there is another difference i found between display:block and display:table in that when either have position:fixed, top:0, left:0, right:0, bottom:0, overflow:auto, if the content exceeds the viewport, display:block will show the scrollbar and display:table will not

2
  • 1
    Have you found a way to have the scrollbar and the full width of display table?
    – HahnSolo
    Commented Jan 28, 2020 at 21:15
  • What do you mean with "the full width of display table", @HahnSolo? You get a table to span the full width with width: 100%. If, on the contrary, you want a block to be only as wide as its children (in order to center it horizontally with margin: auto), similar to the behavior of a table, you can use max-width: fit-content on the block. (Vendor prefixes seem to be necessary, so also max-width: -webkit-fit-content and max-width: -moz-fit-content, see caniuse.com.) Commented Jun 18, 2020 at 13:04
3

One major benefit of using display: table instead of display: block on a parent element is that you can safely use display: inline-block on the child elements, without having to worry about the white-space between the children.

Otherwise you'd have to get rid of that extra white-space by using html comments between the closing/opening tags (for example with multiple <li> elements for the typical horizontal nav), or putting everything in-line in your code without carrier returns (which is an editing nightmare).

1
  • 1
    This sounds like a hack/side-effect more than an intended use case. Commented Nov 6, 2017 at 19:36
2

Recently I find another example for the difference between display: block and display: table

I take the email template from litmus:

<table class="row footer">
  <tbody>
    <tr>
      <td class="wrapper">

        <table class="six columns">
          <tbody><tr>
            <td class="left-text-pad">

              <h5>Connect With Us:</h5>

              <table class="tiny-button facebook">
                <tbody><tr>
                  <td>
                    <a href="#">Facebook</a>
                  </td>
                </tr>
              </tbody></table>

              <br>

              <table class="tiny-button twitter">
                <tbody><tr>
                  <td>
                    <a href="#">Twitter</a>
                  </td>
                </tr>
              </tbody></table>

              <br>

              <table class="tiny-button google-plus">
                <tbody><tr>
                  <td>
                    <a href="#">Google +</a>
                  </td>
                </tr>
              </tbody></table>

            </td>
            <td class="expander"></td>
          </tr>
        </tbody></table>

      </td>
      <td class="wrapper last">

        <table class="six columns">
          <tbody><tr>
            <td class="last right-text-pad">
              <h5>Contact Info:</h5>
              <p>Phone: 408.341.0600</p>
              <p>Email: <a href="mailto:[email protected]">[email protected]</a></p>
            </td>
            <td class="expander"></td>
          </tr>
        </tbody></table>

      </td>
    </tr>
  </tbody>
</table>

with display: block !important; on footer table, It looks:

display:block iOS 10 mail example

with display: table !important; on footer table, It looks:

display:table iOS 10 mail example

The snapshot is take with mail application on iOS 10.0.1.

1
  • 1
    Is the only differences that the Terms, Privacy, and Unsubscribe links are centered? I think this answer would be more helpful if you trimmed out the irrelevant parts of the code and cropped the images, rather than expecting people to read and parse this entire behemoth. Commented Nov 6, 2017 at 19:39
0

Additionally: on a wordpress theme with a complex CSS in which there were conflicting effects on a special class area, I just couldn't get that area centered because of the CSS conflicts. Eventually, the only way to get that part centered was to switch it from display: inline-block to display:table, and then at last it accepted the centering rules, be they text-align or margin:0 auto.

I'm not claiming my case is statistically significant, just providing personal experience feedback, in case other folks in similar distress stumble upon this page after web searches :)

0

Basically, display:inline-block allows elements to stack below each others without any media queries. If you set elements to display:table-cell, you can't change their layout without using a media query.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.