tableの膨張を防ぐ【css tips】

table要素の中に、半角スペースなどの区切り文字が存在しない英数字を入れると、td要素やth要素に設定しているwidthプロパティの長さ以上に、tableが膨張されてしまいます。

サンプル

特に、Firefoxは記号を区切り文字として認識しない為、長いURLなどを入力するとすぐに発生します。

サンプル

これについていくつか解決方法があります。

table要素ではなく、div要素で書く

まず、最初にためすべき方法です。
table要素に固執する必要がなければ、このようなことで頭を悩ませる必要はありません。

改行したい所にbr要素やスペース

抜本的な解決方法になります。
しかし、当然表示をコントロールする為に構造をいじることは、web標準の考えからは反します。

word-break:break-all;

IEの場合はword-break:break-all;を指定することにより回避できます。

サンプル

ただし、word-breakはIEの独自拡張の為Firefoxには適用されません。
しかし、この方法のおかげで大多数の人が閲覧できるのはありがたいことです。

overflow:hidden;

overflow:hidden;を使いはみ出ている部分を消す方法もあります。
この場合はtd要素やth要素には適用されないので、内部にブロックレベル要素を作成して指定します。

サンプル

はみ出た部分が表示されることはありませんが、レイアウトが崩れることがないのでイメージサイト向けの対応方法です。

overflow:auto;

overflow:auto;を使いはみ出ている部分をスクロールで表示する方法もあります。

サンプル

見た目は悪いですが、すべての情報を表示することができる為、情報サイト向けの対応方法です。

結論

word-break:break-all;とoverflowプロパティの併用が望ましいかと

td{
　word-break:break-all;
　border:1px red solid;
　width:200px;
}
td div{
　overflow:hidden;
}

サンプル

Powered by CSS TIPS

スポンサードリンク

«画面の下部にフッターを表示する | メイン | CSS Nite in OSAKA　Dreamweaverの作業効率を高める小技30発 by 鷹野雅弘»