Firebox で table に空の tbody があるとボーダーが消える

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>
Clean Shot 2023 02 15 at 21 52 17 2x

普通に HTML を書いていればまずありえないケースですが、CMS でコンテンツを出力する場合にはありえなくもないので気をつけましょう!

Published 2023-02-15
Updated 2023-02-15