CSS: display:block; vs display:table;

Question

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

Answer 1

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.

Answer 2

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

Answer 3

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.

Answer 4

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"

Answer 5

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:hseldon@trantor.com">hseldon@trantor.com</a></p>
            </td>
            <td class="expander"></td>
          </tr>
        </tbody></table>

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

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

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

The snapshot is take with mail application on iOS 10.0.1.

Answer 6

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/

Answer 7

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

Answer 8

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!

Answer 9

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