Firebox で table のボーダーが消える現象に遭遇しました。レアなケースですが共有しておきます。
Firefox だけテーブル( table
)のボーダーが消えるという現象に遭遇しました。ググってみると position: relative; background-color: foo;
が指定されているのが原因だという記事をいくつか見つけました。
でも残念ながら僕のケースはこれに当てはまらず、解決策と言われるbackground-clip: padding-box;
を追加しても解決しませんでした。
さて、どうしたものかと思いながらも、正常に表示されている table
とボーダーが消えている table
を見比べていると、ボーダーが消えている table
の方は tbody
が空になっていました。
Firefox で下記の HTML で試してみたところビンゴでした、これが原因です。tbody
ごと削除したら解決しました。
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Table</title>
<style>
table {
border-collapse: collapse;
}
table, th, td {
border: 1px solid #000000;
}
</style>
</head>
<body>
<h1>tbody あり</h1>
<table>
<caption>サッカー選手</caption>
<thead>
<tr>
<th>名前</th>
<th>ニックネーム</th>
<th>国籍</th>
</tr>
</thead>
<tbody>
<tr>
<td>ロベルト・バッジョ</td>
<td>ロビー</td>
<td>イタリア</td>
</tr>
<tr>
<td>ドラガン・ストイコビッチ</td>
<td>ピクシー</td>
<td>ユーゴスラビア</td>
</tr>
<tr>
<td>ジョゼップ・グアルディオラ</td>
<td>ペップ</td>
<td>スペイン</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>名前</th>
<th>ニックネーム</th>
<th>国籍</th>
</tr>
</tfoot>
</table>
<h1>tbody 空っぽ</h1>
<table>
<caption>サッカー選手</caption>
<thead>
<tr>
<th>名前</th>
<th>ニックネーム</th>
<th>国籍</th>
</tr>
</thead>
<tbody></tbody>
<tfoot>
<tr>
<th>名前</th>
<th>ニックネーム</th>
<th>国籍</th>
</tr>
</tfoot>
</table>
<h1>tbody ごとなし</h1>
<table>
<caption>サッカー選手</caption>
<thead>
<tr>
<th>名前</th>
<th>ニックネーム</th>
<th>国籍</th>
</tr>
</thead>
<tfoot>
<tr>
<th>名前</th>
<th>ニックネーム</th>
<th>国籍</th>
</tr>
</tfoot>
</table>
</body>
</html>
普通に HTML を書いていればまずありえないケースですが、CMS でコンテンツを出力する場合にはありえなくもないので気をつけましょう!