table に指定しておきたい CSS メモ

table 関係で調べ物をしていたときに見かけた、Takazudo さんの zudolog » tableのcellspacing=”0″を消すためにという記事の中で

tableのcellspacing=”0″が必要なことはかなり多い。
しかし、これと同じことをしてくれるCSSのプロパティ、border-spacing:0 は、IE7以下では対応していない。そこで登場するのがborder-collapse:collapse なのだけれど、これにもまた問題がある。そんなこんなを解決するTips。やりたいのはcellspacing=”0″を入れたくないってだけですが。

という一文。一文というより最後の一言がグッときましたね。
そうそう、HTML 側に余計なもの書き込みたくないんですよね。それだけ。

できるだけキレイな HTML、CSS を組みたいものです。
このブログはいろいろ汚いとこがあるので、ちょっとずつ直していきます…。

ということで、Takazudo さんの書いていた CSS を自分向けに改変したものをメモ。

table{
width:auto;
border-spacing:0;
border-collapse:separate;
/border-collapse:collapse; /* ie6,7 */
border-right:1px solid #333333;
border-bottom:1px solid #333333;
table-layout:fixed;
word-break:break-all;
word-wrap:break-word;
}

th, td{
border-top:1px solid #333333;
border-left:1px solid #333333;
padding:5px;
}

Takazudo さんのサンプルに追加して、「table-layout:fixed;」、「word-break:break-all;」、「word-wrap:break-word;」を指定しています（プロパティの順番も変更）。

追加したもの

table-layout:fixed;

この指定を入れておくと、セルの横幅が以下のようになります。

• 各セルの幅を指定していればそのサイズに
• 指定していない場合はセルの数で均等に分割

table-layout はデフォルトが auto なので、自動で幅を調整してくれる方がいいなら、この指定を外すか該当する箇所で上書きすればいいと思います。

また、この指定をしておくと最初の一行目を読み込んだ時点で各列の幅を固定して表示を開始するため、 表示が速くなるメリットがあるそうです（参考: table-layout－スタイ ルシートリファレンス）。

回線速度自体が結構早くなっているので、そこまで気にする必要はないかもしれないですが。

word-break:break-all; と word-wrap:break-word;

これらの指定は、セル幅を超える長い単語や URL を強制的に折り返させるために入れています。
日本語をエンコードした URL が表示された場合などに word-wrap:break-word; の指定をしていないとセルを突き破って表示しちゃいます。

指定なし

IE6, IE8, Fx 3.6, Chrome 6.0, Safari 5 で突き破る

word-wrap:break-word; のみ指定

IE6, IE8, Fx 3.6, Chrome 6.0, Safari 5 でオッケー

word-break:break-all; のみ指定

Fx 3.6 で突き破る

両方指定

IE6, IE8, Fx 3.6, Chrome 6.0, Safari 5 でオッケー

ということで、セル内で改行させるという本来の目的は果たせているので、word-wrap:break-word; の指定だけでもいいのですが、その場合には IE だけ改行位置が変わってしまいます。

そもそもなんでこの指定（word-break:break-all;）を入れたのかを覚えていないのですが、word-break:break-all; を加えると、IE と他のモダンブラウザ間で表示が近くなるので外さずに残しています。

原因が分からないので、また時間があるときにでも調べてみようと思います。
原因が分かる方、うまくいかないパターンを発見された方がいらっしゃいましたら、ぜひ教えていただければと思います。

関連投稿

• デフォルトスタイルのリセット
  category: CSS tags: CSS+tips.
• Firefox のキーボードショートカットのチートシート
  category: Firefox tags: Firefox+tips.
• display:inline-block; を使う
  category: CSS tags: CSS+tips.

posted on 2010.06.30 11:55pm