Firebox で table に空の tbody があるとボーダーが消える
2023-02-15
3分で読了
更新: 2025-12-26
目次
Firefox だけテーブル（ table ）のボーダーが消えるという現象に遭遇しました。ググってみると position: relative; background-color: foo; が指定されているのが原因だという記事をいくつか見つけました。
でも残念ながら僕のケースはこれに当てはまらず、解決策と言われるbackground-clip: padding-box;を追加しても解決しませんでした。
さて、どうしたものかと思いながらも、正常に表示されている table とボーダーが消えている table を見比べていると、ボーダーが消えている table の方は tbody が空になっていました。
Firefox で下記の HTML で試してみたところビンゴでした、これが原因です。tbody ごと削除したら解決しました。
Table
tbody あり
サッカー選手
名前
ニックネーム
国籍
ロベルト・バッジョ
ロビー
イタリア
ドラガン・ストイコビッチ
ピクシー
ユーゴスラビア
ジョゼップ・グアルディオラ
ペップ
スペイン
名前
ニックネーム
国籍
tbody 空っぽ
サッカー選手
名前
ニックネーム
国籍
名前
ニックネーム
国籍
tbody ごとなし
サッカー選手
名前
ニックネーム
国籍
名前
ニックネーム
国籍
普通に HTML を書いていればまずありえないケースですが、CMS でコンテンツを出力する場合にはありえなくもないので気をつけましょう！