title: Why is box-sizing acting different on table vs div?
body: <p>Here's the HTML: <a href="http://jsfiddle.net/jC8DL/1/">http://jsfiddle.net/jC8DL/1/</a></p>
  
  <pre><code>&lt;div style='width:300px;border:1px solid green'&gt;
    &lt;div&gt;Outer div&lt;/div&gt;
    &lt;div style='width:100%;border:1px solid red;margin:10px;'&gt;
      Inner div, 10px margin.
    &lt;/div&gt;
    &lt;div style='width:100%;border:1px solid red;padding:10px;'&gt;
      Inner div, 10px padding.
    &lt;/div&gt;
    &lt;div style='width:100%;border:1px solid red;padding:10px;box-sizing:border-box'&gt;
      Same, with box-sizing: border-box
    &lt;/div&gt;
    &lt;table style='width:100%;border:1px solid red;padding:10px;'&gt;
      &lt;tr&gt;&lt;td&gt;Inner table, 10px padding&lt;/td&gt;&lt;/tr&gt;
    &lt;/table&gt;
  &lt;/div&gt;  
  </code></pre>
  
  <p>And it looks like this in my Chrome:</p>
  
  <p><img src="https://i.stack.imgur.com/OL50d.png" alt="enter image description here"></p>
  
  <p>I think I understand everything until the last one. My Chrome inspector shows the table's computed <code>box-sizing</code> style is <code>content-box</code> 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?</p>