「幅が制限されている」列と「幅が広い」列を持つテーブルがあります。予想される動作は、テーブルのサイズが変更されたときに、幅が制限された列が可能な限り最小になり、幅の広い列が使用可能なスペースに収まるようになることです。
<!DOCTYPE html>
<style>
.limited {width:0;overflow:hidden;}
.wide {overflow:hidden;}
.limited div, .wide div {max-width:10em;white-space:nowrap;}
table {width:100%;}
</style>
<table id="example" border="1">
<thead>
<tr>
<td class="limited"><div>veeeeeeee eeeeeeee eeeeee eeeeeeeeery</div></td>
<td class="wide"><div>looooooooo ooooooooooo oooooooooooooooooo ooooooooooooooooo ooooooong</div></td>
<td class="limited"><div>text</div></td>
</tr>
</thead>
</table>
コピーされたコードは、Firefox と IE9 では期待どおりに動作しますが、Chrome では動作しません。Google chrome で期待どおりの動作をさせるにはどうすればよいですか?