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

zevbrokeit · Accepted Answer · 2016-02-11 01:36:33Z

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/

answered Feb 11, 2016 at 1:36

zevbrokeit

1411 silver badge3 bronze badges

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

1 Comment

Kaspar Etter Over a year ago

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.

Boiethios · Accepted Answer · 2019-12-27 09:17:08Z

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.

edited Dec 27, 2019 at 9:17

Boiethios

43.8k25 gold badges151 silver badges198 bronze badges

answered Jul 30, 2014 at 23:03

Jason

4,1694 gold badges24 silver badges35 bronze badges

2 Comments

B T Over a year ago

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!

Will Over a year ago

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

Alex W · Accepted Answer · 2015-04-15 22:48:45Z

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!

answered Apr 15, 2015 at 22:48

Alex W

7417 silver badges14 bronze badges

1 Comment

Robert Over a year ago

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!

josinalvo · Accepted Answer · 2017-06-01 14:26:37Z

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"

answered Jun 1, 2017 at 14:26

josinalvo

1,51217 silver badges28 bronze badges

Comments

icube · Accepted Answer · 2019-10-15 03:38:07Z

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

answered Oct 15, 2019 at 3:38

icube

2,8181 gold badge34 silver badges68 bronze badges

2 Comments

HahnSolo Over a year ago

Have you found a way to have the scrollbar and the full width of display table?

Kaspar Etter Over a year ago

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

tricon · Accepted Answer · 2015-01-29 09:57:49Z

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

answered Jan 29, 2015 at 9:57

tricon

3334 silver badges18 bronze badges

1 Comment

Sean the Bean Over a year ago

This sounds like a hack/side-effect more than an intended use case.

zlx_star · Accepted Answer · 2016-10-21 07:20:18Z

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:

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

The snapshot is take with mail application on iOS 10.0.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.

EcchiOli · Accepted Answer · 2015-09-11 09:32:17Z

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

answered Sep 11, 2015 at 9:32

EcchiOli

8209 silver badges12 bronze badges

Comments

user9141607 · Accepted Answer · 2018-04-27 07:38:54Z

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.

answered Apr 27, 2018 at 7:38

user9141607

351 silver badge8 bronze badges

Collectives™ on Stack Overflow

CSS: display:block; vs display:table;

9 Answers 9

1 Comment

2 Comments

1 Comment

Comments

2 Comments

1 Comment

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

1 Comment

2 Comments

1 Comment

Comments

2 Comments

1 Comment

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related