浜松のWEBシステム開発・スマートフォンアプリ開発・RTK-GNSS関連の開発はお任せください
株式会社シーポイントラボ
TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F

【Firefox】【CSS】背景色を入れた table のボーダーが消える問題とその対処法

 題の通りです。少なくとも Firefox 97.0.1 で題の問題が起きます。これは次のコードとデモで再現できます。

<table>
  <tbody>
    <tr>
      <td>a</td>
      <td>b</td>
      <td>c</td>
    </tr>
    <tr>
      <td>a</td>
      <td>b</td>
      <td>c</td>
    </tr>
  </tbody>
</table>
table {
  border-collapse: collapse;
}
td{
  border: solid 2px #ff00ff;
  background-color: #ffe9e9;
  position: relative;
}

 これを Firefox で見ると次のスクリーンショットの様になり、

 Google Chrome や Microsoft Edge で見ると次のスクリーンショットの様になります。

 とりあえず対処方法は次の様に CSS を追加するだけです。これでボーダーが復活します。

table {
  border-collapse: collapse;
}
td{
  border: solid 2px #ff00ff;
  background-color: #ffe9e9;
  position: relative;

  /* ↓を追加 */
  background-clip: padding-box;
}

background-clip – CSS: カスケーディングスタイルシート | MDN

 ボーダーが消える原因はbackground-colorposition: relative;の組み合わせにあります。リッチなテーブルセルの中で自在に要素を扱おうとするとこのボーダーの問題に引っかかります。こうなってしまう原理ですが、正直よくわかりません。ボーダーをそもそも描画していないのか、ボーダーを太さ0で描画してしまったのか、パディング領域を上から描画してしまったのか。
 とりあえず background-clip という背景の切り取り範囲を指定する設定を

background-clip: padding-box;

とすることによって背景領域がボーダーの内側までしか伸びない様になり、対処が可能です。

  • この記事いいね! (1)