なぜ `overflow: hidden` が ` 要素でテキストを切り詰めないのか?

 ボックス サイズ: border-box;<br>}<br>table {<br> table-layout: 固定;<br> border-collapse: 折りたたみ;<br> width: 100%;<br> max-width: 100px;<br>}<br>td {<br> 背景: #F00;<br> パディング: 20px;<br> オーバーフロー: 非表示;<br> ホワイトスペース: nowrap;<br> 幅: 100px;<br> ボーダー: 実線 1px #000;<br>}

 <tbody></p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><tr>
  <td>
    This_is_a_terrible_example_of_thinking_outside_the_box.
  </td>
</tr>
<tr>
  <td>
    This_is_a_terrible_example_of_thinking_outside_the_box.
  </td>
</tr>