td がテーブルの最大幅よりも広くなるのを防ぐにはどうすればよいですか? テーブルの残りの幅を埋めるために使用されるため、サイズをピクセル単位で設定することはできません。max-width を 100% に設定すると、これがコンテンツの幅のようです。
<div class="content" style="width: 200px; max-width: 200px;">
<table class="outer-table" style="width: 100%; max-width: 100%;">
<tr>
<td style="white-space: nowrap; max-width: 100%; background-color: yellow;">
<div class="inner-div" style="width: 100%; max-width: 100%; overflow: scroll;">
This is a table width to much content. I use "white-space: nowrap" to force it to grow wide.
</div>
</td>
</tr>
</table>
</div>
実際に見てみましょう: http://jsfiddle.net/TxqT4/1/