2009/02/02(Mon)テーブルの幅を固定化
2009/02/02 23:29
適度に改行されていれば問題ないが、スペースを含まない半角英数字の連続が含まれている場合、内容の単語を途中で折り返さず全体を単語と認識して、テーブルがビヨーンと横に伸びてしまう。
それに対しての分析と対応。
IEへの対処
ビヨーン問題を防ぐためには以下のように設定。
td {
word-break: break-all;
word-wrap: break-word;
}
しかし、これはIE限定。（Safariも対応らしい？）▼IEでの表示
もちろんIEユーザーは多いので、指定しておいて損は無いが、問題はFirefox, Opera。
IEよりは少数派とはいえ無視できない存在である。*1
Firefox, Opera等への対処
とりあえず、tableが横に伸びるのをやめ、固定化するために、次のように設定。だが、はみ出ている部分は、borderを突き抜けてビヨーンと伸びっぱなしでかっこ悪いので、とりあえずoverflowで隠してみる。（下図の1番目）
しかし、このままだと見えない部分があるので気持ち悪い。
table {
table-layout: fixed;
}
td {
overflow: hidden;
}
しかしながら、どうやってもCSSだけで単語の途中で改行させる事はできないので、HTMLタグの方を修正し、td要素をdivタグで挟む。（下図の2番目）
そして次のように設定。横スクロールバーが出てかっこ悪いが、一応全体の情報を眺めることが可能になる。
td div {
overflow: auto;
}
divが嫌ならspanという手もあり。この場合は、display: block;が余計に必要。（下図の3番目）▼Firefox3での表示
まとめ
table.hoge {
table-layout: hidden;
width: 200px; /* お好きなように */
}
td {
/* IE専用なので アンダースコアハック */
_word-break: break-all;
_word-wrap: break-word;
}
/* 以下はどっちかでよい */
/* divの場合 */
td div {
overflow: auto;
}
/* spanの場合 */
td span {
display: block;
overflow: auto;
}