[html/css]tableレイアウトで文字が枠からはみ出る場合の対処方法

tableタグを使ってレイアウトしていると、セル内の文字が枠からはみ出る事が多々ある。

特にスマホやタブレットの為にレスポンシブデザインにしている場合は尚更だ。

そんな時、どうすれば良いかというと、とりあえずテーブルタグに以下のスタイルシートを当てれば大抵解決する。

table{
	width: 100%;
	word-break: break-word;
	word-wrap: break-word;
}

ただし上記は、単語単位で桐の良い場所で折り返す指定である「break-word」にしているため、table幅を正しく取得できていないと正常に折り返しができないので厄介。

他の箇所で設定した幅やauto設定やらが変に絡んできてうまくいかない事があるので、以下のように、単語の途中でも問答無用で折り返す「break-all」設定の方が簡単かと思われ。

table{
	width: 100%;
	word-break: break-all;
	word-wrap: break-all;
}