レスポンシブなページ表示を試行錯誤している中で見つけたことのメモ

HTMLで固定幅のテーブルを表示させ、その中の日本語文字列を表の右端で折り返して表示させ、ブラウザのウインドウ幅が表の幅以下に狭められても、表の幅が追従して変化し、折り返し箇所が折りたたまれていくような表示をさせたいと思った。FireFoxや IEは 普通に スタイルシートで 　width: 500px;  max-width: 100% のような指定をすれば、ウインドウ幅が 500px以上では 表の幅 500pxになり、ウインドウ幅がそれ以下なら表の幅も追従して減っていく。
しかし、Chromeだけは この設定だと ウインドウ幅が 500px以下になった時でも表の幅は 500pxで固定され、ウインドウに横スクロールバーが表示されてしまう。これだと スマホなどでは実用にならない。

でいろいろ試したところ、上記のスタイルを table タグに直接指定しないで、div タグに指定してその中に tableタグを width:100% で指定してやれば良いことが分かった。もちろん IEや FXでも問題ない。
具体的なコードは以下のようになる。

<div style=”width: 680px; max-width: 100%;”>
<table style=”width: 100%;” border=”1″>
<tbody>
<tr>
<td>あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやいゆえよらりるれろわ
</td>
</tr>
</tbody>
</table>
</div>

2列以上で、一部の列の幅を　px/emなどで固定する場合は残りの列の幅は %など相対的にしておく。

ちなみに、<p>タグではダメだった。