2009/02/02(Mon)テーブルの幅を固定化

2009/02/02 23:29 Languages::CSS
例えば、掲示板のようなものを作っていてtableタグを使って投稿内容を表示したとする。
適度に改行されていれば問題ないが、スペースを含まない半角英数字の連続が含まれている場合、内容の単語を途中で折り返さず全体を単語と認識して、テーブルがビヨーンと横に伸びてしまう。
それに対しての分析と対応。

IEへの対処

ビヨーン問題を防ぐためには以下のように設定。
td {
    word-break: break-all;
    word-wrap: break-word;
}
しかし、これはIE限定。(Safariも対応らしい?)

▼IEでの表示
table-fixed-ie.png



もちろんIEユーザーは多いので、指定しておいて損は無いが、問題はFirefox, Opera。
IEよりは少数派とはいえ無視できない存在である。*1

*1 : それらのブラウザを使っている人の中には、レイアウトが崩れているページに対して標準仕様に従っていないブラウザ固有のCSSを使ってレイアウトしている方が悪い、と叫びだす人もいる…^^;

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-fixed-fx3.png

まとめ

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;
}

検証用HTML

table-fixed.html