Why is box-sizing acting different on table vs div?

by

Yes, CSS2.1 states the following for tables with the separated borders model:

However, in HTML and XHTML1, the width of the <table> element is the distance from the left border edge to the right border edge.

Note: In CSS3 this peculiar requirement will be defined in terms of UA style sheet rules and the ‘box-sizing’ property.

The current CSS3 definition of box-sizing does not say anything about this, but translating the above quote it basically means in (X)HTML, tables use the border-box model: padding and borders do not add to the specified width of a table.

Note that in terms of the box-sizing property, different browsers seem to handle this special case differently:

  • Chrome
    box-sizing is set to the initial value, content-box; changing it has no effect whatsoever. Neither does redeclaring box-sizing: content-box within the inline styles, but that should be expected. Either way, Chrome appears to be forcing the table to always use the border-box model.

  • IE
    box-sizing is set to border-box; changing it to content-box causes it to behave like the second div.

  • Firefox
    -moz-box-sizing is set to border-box; changing it to content-box or padding-box causes it to resize accordingly.

Since CSS3 does not yet make any mention of table box sizing, this should not come as a surprise. At the very least, the result is the same — it’s only the underlying implementation that’s different. But given what the note says above, I would say that IE and Firefox are closer to the intended CSS3 definition, since in Chrome you can’t seem to change a table’s box model using the box-sizing property.

Tables with the collapsing border model don’t have padding at all, although in this case it’s not relevant since your table does not use this model:

Note that in this model, the width of the table includes half the table border. Also, in this model, a table does not have padding (but does have margins).

More Related Contents:

  1. Set cellpadding and cellspacing in CSS?
  2. Word-wrap in an HTML table
  3. How to deal with page breaks when printing a large HTML table
  4. HTML/CSS: Making two floating divs the same height
  5. CSS3’s border-radius property and border-collapse:collapse don’t mix. How can I use border-radius to create a collapsed table with rounded corners?
  6. Make a div fill the height of the remaining screen space
  7. Why doesn’t table > tr > td work when using the child selector?
  8. Table with fixed header and fixed column on pure css
  9. How to display scroll bar onto a html table
  10. Fixed header table with horizontal scrollbar and vertical scrollbar on
  11. How can I set the max-width of a table cell using percentages?
  12. Add a horizontal scrollbar to an HTML table
  13. Wrap text in tag
  14. CSS table-cell equal width
  15. Rounded table corners CSS only
  16. using text-align center in colgroup
  17. Giving a border to an HTML table row,
  18. overflow:scroll; in
  19. How can I apply a border only inside a table?
  20. Linethrough/strikethrough a whole HTML table row
  21. Equivalent to float in Outlook
  22. Table overflowing outside of div
  23. The border-radius property and border-collapse:collapse don’t mix. How can I use border-radius to create a collapsed table with rounded corners?
  24. Removing unwanted table cell borders with CSS
  25. Should Tables be avoided in HTML at any cost?
  26. CSS: display:block; vs display:table;
  27. Styling the last td in a table with css
  28. Setting max-height for table cell contents
  29. Table vertical header?
  30. How to make a table with equal column widths in CSS?

Leave a Comment