Firefoxで`border-collapse: collapse;`した`table`に`border: dashed`等を付けるとずれる

現象

例えば、

table {
    border-collapse: collapse;
    border-spacing: 0;
}
td {
    border: 1px dashed #333;
}

cssにこのようなコードを書いて表示させると、テーブル全体に破線の枠が追加されるはずです。

しかし、Firefoxで表示すると……

Firefoxでtableの表示を行うと、border-collapse指定した内側のborderだけずれる
Firefoxでtableの表示を行うと、border-collapse指定した内側のborderだけずれる

……何故かFirefoxだけ、上述のような表示になります。

間のborder-collapseが関係するborder: dashedで、ブラウザがborderの上下や左右が重なる部分を調整して表示している部分。重なりを削除して残ったものだけが表示されているように、ほんの少しだけ。

Firefoxでtableの表示を行うと、border-collapse指定した内側のborderだけずれる(拡大)
Firefoxでtableの表示を行うと、border-collapse指定した内側のborderだけずれる(拡大)

やや拡大。やはりずれているように見えます。

調査・対処

検索するとborder-collapse: collapse;ではなくborder-collapse: separate;にすると良い、という記事もありましたが、今回はborder自体が消えることもあったのであまり汎用的ではなさそう。

最終的に以下のように力業になりました。

table {
    border-collapse: separate;
    border-spacing: 0;
}
td {
    border-top: 1px dashed #333;
    border-left: 1px dashed #333;
}
tr:last-of-type td {
    border-bottom: 1px dashed #333;
}
td:last-of-type {
    border-right: 1px dashed #333;
}

border-collapse: separate;しつつ、borderで全体指定ではなく、重なりをそもそも生じさせないようにborder-topborder-leftなどで最低限で済むように調整しました。

fixedしたtablのborder(Firefox表示)
fixedしたtablのborder(Firefox表示)

Firefoxでも綺麗に表示されました。

サンプル・デモ

参考

この記事を書いた人

アバター

アルム=バンド

フロントエンド・バックエンド・サーバエンジニア。LAMPやNodeからWP、Gulpを使ってejs,Scss,JSのコーディングまで一通り。たまにRasPiで遊んだり、趣味で開発したり。