19

Here's the HTML: http://jsfiddle.net/jC8DL/1/

<div style='width:300px;border:1px solid green'>
  <div>Outer div</div>
  <div style='width:100%;border:1px solid red;margin:10px;'>
    Inner div, 10px margin.
  </div>
  <div style='width:100%;border:1px solid red;padding:10px;'>
    Inner div, 10px padding.
  </div>
  <div style='width:100%;border:1px solid red;padding:10px;box-sizing:border-box'>
    Same, with box-sizing: border-box
  </div>
  <table style='width:100%;border:1px solid red;padding:10px;'>
    <tr><td>Inner table, 10px padding</td></tr>
  </table>
</div>

And it looks like this in my Chrome:

enter image description here

I think I understand everything until the last one. My Chrome inspector shows the table's computed box-sizing style is content-box so I expect it to behave like the second div, and overflow and look ugly. Why is it different? Is this documented somewhere in the HTML/CSS spec?

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Rob N
  • 15,024
  • 17
  • 92
  • 165
  • 3
    It's because `div`'s are block elements. Try adding `display: block;` to the inner table. It will display the same as the div would. – Bram Vanroy Sep 28 '13 at 16:19
  • 4
    @Bram Vanroy: 1) That's just [begging the question](https://en.wikipedia.org/wiki/Begging_the_question) then. 2) The whole point of this question is to ask why a table would behave differently from a block; what would changing the table into a block accomplish? – BoltClock Sep 28 '13 at 17:07
  • 1
    @BoltClock You have misinterpreted my comment (it is, hence, a *comment*). I was explaining in short why this difference occurs. I didn't try to answer the question; I didn't post it as an answer anyway. – Bram Vanroy Sep 28 '13 at 17:28

2 Answers2

22

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

Community
  • 1
  • 1
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
5

That's how <table> <td> <th> elements works. These elements are not block level elements.

It contains padding inside the given width like the box-sizing:border-box would do on other block level elements.

FYI, I didn't find it anywhere document.

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
absqueued
  • 3,013
  • 3
  • 21
  • 43