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:
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?
Problem courtesy of: Rob N
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:
box-sizingis set to the initial value,
content-box; changing it has no effect whatsoever. Neither does redeclaring
box-sizing: content-boxwithin the inline styles, but that should be expected. Either way, Chrome appears to be forcing the table to always use the border-box model.
box-sizingis set to
border-box; changing it to
content-boxcauses it to behave like the second
-moz-box-sizingis set to
border-box; changing it to
padding-boxcauses 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
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).
Solution courtesy of: BoltClock
<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.
Discussion courtesy of: Shekhar K. Sharma
This recipe can be found in it’s original form on Stack Over Flow .
Ref. http://jsfiddle.net/jC8DL/1/, https://stackoverflow.com/users/327572/rob-n, http://www.w3.org/TR/CSS21/tables.html#separated-borders, http://www.w3.org/TR/<strong>css3</strong>-ui/#box-sizing, http://www.w3.org/TR/CSS21/tables.html#collapsing-borders, https://stackoverflow.com/users/106224/boltclock, https://stackoverflow.com/users/2621325/shekhar-k-sharma, https://stackoverflow.com/questions/19068909/why-is-box-sizing-acting-different-on-table-vs-div, https://union-click.jd.com/jdc?d=ZKPlW2