btmup Blog

Web 制作のことを中心に、ちょっとした Tips などを掲載しています。「自分用メモ」が基本スタンス。

CSS Firefox

Firefox でテーブルの線(border)が表示されたりされなかったりする件の対策。

投稿日:

珍しく Firefox のバグです(だと思います)。
あえて「解決法」ではなく「対策」としたのは、解決したかどうか定かではないからです。
つまり、「よく分からんけど、とりあえずうまくいってるっぽい」と。

発生した現象はタイトルの通りですが、テーブルに設定した線が、Firefox で見てみると表示されたりされなかったりするのです。
「されたりされなかったり」とは言っても、表示のたびに結果が変わるということではなく、再現性はあります。
ただ、文字サイズを変えたり行間を変えたりパディングを変えたりすると、表示される線と表示されない線が違ったりするということです。
色々な数値を微調整していけばすべての線がちゃんと表示されるポイントがあるかも知れませんが、環境が異なればまた結果も変わってくるでしょうし、根本的な解決にはなりません。

というワケで、色々試した結果、以下のような方法に落ち着きました。
かなり無理矢理ではありますが、今のところ正常に(?)表示されています。

原因は「border-collapse: collapse;」?

ネットで調べまくってもいまいち情報が無かったので、Firebug を使って一つ一つプロパティをいじりながら確認してみました。
すると、どうやら「border-collapse: collapse;」が原因らしいことが判明。
テーブルごとに設定するのが面倒なので、「border-spacing: 0;」と一緒に「border-collapse: collapse;」を table タグセレクタで一括設定してるんですが、これを Firebug で外すと線が表示されたのです。
(もちろん線の重なりが解除になるので太くなっちゃいましたが)

じゃあ、この現象が起こってるテーブルだけ「border-collapse: separate;」にすれば良いのかも。
という仮説を検証するため、「border」の設定方法を若干メンドくさい方法に変更。
つまり、元々は「border」で四辺をいっぺんに設定していたものを、table 全体とセルごとの設定に一辺ずつ振り分けたワケです。

うん、分かりにくいですね。
以下、まとめ。

【元々】

table {
	border-collapse: collapse;
	border-spacing: 0;
}
th,td {
	border: 1px solid #000;
}

【修正後】

table {
	border-collapse: collapse;
	border-spacing: 0;
}
table.hoge {	/* 線が表示されなかったテーブル */
	border-collapse: separate;
	border-top: 1px solid #000;
	border-left: 1px solid #000;
}
th,td {
	border-bottom: 1px solid #000;
	border-right: 1px solid #000;
}

結果、見事成功。
これで、Firefox でも全ての線が表示されるようになりました。

やっぱり IE 対策は必要

ところが、それで完全解決とはいきません。
毎度毎度の登場、IE6 が顔を出します。今回は IE7 もご一緒でした。

上記の設定をしたところ、何とセル同士の間に隙間ができたのです。
IE8は無事。ということは、IE6 と IE7 のバグ……? またかよ……。

とはいえ、今回の元々の原因は Firefox にありますので、Firefox にだけ上記の設定を適用することにしました。

それが以下。

【最終版】 ※設定の仕方が間違ってたので修正しました。[2010-05-19]

table {
	border-collapse: collapse;
	border-spacing: 0;
}
table.hoge {	/* 線が表示されなかったテーブル */
	border-top: 1px solid #000;
	border-left: 1px solid #000;
}
html:not([lang*=""]) table.hoge {	/* Firefox用ハック */
	border-collapse: separate;
}
th,td {
	border-bottom: 1px solid #000;
	border-right: 1px solid #000;
}

Firefox にだけ適用するハックって何種類もあるみたいなんですが、何となく安定してるっぽいので今回はこの方法にしてます。
(参考:逆引きCSSハック(IE8,Firefox,Opera,Safariを含めたブラウザ別CSSハック) | Liquid Paper Clips

とりあえずこれで終了。
根本的な原因が不明なのがアレですし、ハックで決着っていうのもアレですが、まぁ一つの参考にしてみてください。
他のスタイルとの競合とかもあったりするかも知れませんしね。

しかし、バグは IE だけにしてほしいもんですなー。







-CSS, Firefox
-, , , , , ,

執筆者:


  1. […] ていたところ、こちらのブログにたどり着きました。 Firefox でテーブルの線(border)が表示されたりされなかったりする件の対策。 btmup Blogさんの記事のおかげですぐに解決する事がで […]

  2. ジョージ より:

    どうもはじめまして!自分もこれなりました!
    自分の場合は面倒くさがって3行あったテーブルをカスタマイズするとき2行になおせばいいのに3行のまま2行にみせるように( rowspan=”2″をつかって)していたら
    border-bottomがなくなってました。
    rowspanをなくして2行で記述したら直りましたよ。

  3. kbysbtmup より:

    >ジョージさん
    コメントありがとうございます。
    うーん、何なんでしょうね。結局原因は分からず終いです。
    Firefox もメジャーアップデートのサイクルが早くなるみたいなので、こういうバグも無くなってくれればいいんですけどね。

comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

背景画像を設定した要素のテキストに IE でもドロップシャドウを表示する方法。

CSS3 には「text-shadow」というプロパティがあり、これを指定するだけでテキスト要素に影を付けることができます(色や距離やぼかし具合もコントロール可)。 ただし、IE 以外ですが。例に漏れ …

no image

col/colgroup 要素で有効なスタイルと無効なスタイル。

「ある列だけを改行なしにしたい」というときが結構あります。 確実なのは「その列のすべての td タグに class を付けていく」という方法ですが、あまりスマートとは言えません。 ソースの見栄え的にも …

no image

今日は裸の日 – CSS Naked Day。

4 月 9 日は「CSS Naked Day」ということなので、便乗してみます。 »CSS Naked Day…公式(?)サイト »そういえば裸の日でした|CSS HappyL …

no image

CSS Nite in OSAKA, Vol.17 に参加してきました。

7/18(土)に開催された「CSS Nite in OSAKA, Vol.17 powered by KAGOYA Internet Routing」に参加してきました。 参加というか、まぁ勉強ですね …

no image

リスト形式でマークアップした画像の下にできるすき間とその解決法。

よくぶつかる問題の割に忘れがちなので、メモ的エントリー。 画像を ul やら ol やらリスト形式でマークアップする機会って、結構多いんじゃないかと思います。 グローバルナビとか、写真のサムネイルとか …