« PreviousNext »

Entry

tableにborder-collapse:collapse;を使うとFirefoxで1pxはみ出してしまう問題

今までテーブルに関してはborder-collapse:collapse;で一貫して来たのだけど、どうやらFirefoxでは1pxはみ出してしまうようなのでやり方を変えてみました。
何で今まで一度もカラム落ちしなかったのか疑問だけれど、特に支障がなかったので今まで全然気づいていませんでした。
ちなみにここで言うテーブルとはセルが1pxの線で区切られているごくオーソドックスなもののことです。

要点はborder-collapseをcollapseにするか、もしくはseparateにするかということなのですが、collapseでやると上述のようにFirefoxではみ出てしまうのでseparateに変更してみます。

例えば幅を400pxにしたいとき、collapseを使った方法では以下の通り。

border-collapse:collapse;の場合

Firefoxだと横幅が641pxになってしまいます。
これをseparateを使った方法に書き換えると以下のような感じ。

border-collapse:separate;の場合

Firefoxでも横幅が640pxに収まりました。
IEはborder-spacingには対応していないのでtableのcellspacing属性で代用しています。

もっとスマートなやり方があったらいいんですが、しばらくこれで行こうと思います。
なお、あえてテーブルをdivで括っているのには理由があるのですが、それについてはまた後ほど。

Page Top

« PreviousNext »