Вот 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>  

И это выглядит так в моем Chrome:

Я думаю, что я все понимаю до последнего. Мой Chrome Инспектор показывает вычисленные таблицыbox-sizing стильcontent-box поэтому я ожидаю, что он будет вести себя как второй div, переполнится и будет выглядеть ужасно. Почему это отличается? Это задокументировано где-то в спецификации HTML / CSS?