CSS: display:block; vs display:table;

by

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/

More Related Contents:

  1. How to design a table like this
  2. How do I keep two side-by-side div elements the same height?
  3. How do I create an HTML table with a fixed/frozen left column and a scrollable body?
  4. Word-wrap in an HTML table
  5. Table fixed header and scrollable body
  6. Alternate table row color using CSS?
  7. How to deal with page breaks when printing a large HTML table
  8. Make a div fill the height of the remaining screen space
  9. IE9 Float with Overflow:Hidden and Table Width 100% Not Displaying Properly
  10. Fixed Table Cell Width
  11. Add border-bottom to table row
  12. How to make fill height
  13. How to remove unwanted space between rows and columns in table?
  14. How to make Scrollable Table with fixed headers using CSS [duplicate]
  15. How can I set the max-width of a table cell using percentages?
  16. How can I truncate table cells, but fit as much as content possible?
  17. Setting table column width
  18. How to force table cell content to wrap?
  19. Table scroll with HTML and CSS [duplicate]
  20. How to center the contents of an HTML table?
  21. How to hide Table Row Overflow?
  22. Min-width and max-height for table attributes
  23. Linethrough/strikethrough a whole HTML table row
  24. Why is box-sizing acting different on table vs div?
  25. Border around tr element doesn’t show?
  26. How to completely remove borders from HTML table
  27. Removing unwanted table cell borders with CSS
  28. Yet Another Divs vs Tables issue: Forms
  29. Splitting a table cell into two columns in HTML
  30. Table vertical header?

Leave a Comment