背景色を指定したtableのセルで罫線が消えてしまう場合の対処法

テーブルのセルに対して罫線と背景色を指定すると、FirefoxとSafariで罫線が見えなくなってしまう現象に出くわしました。

HTMLはこんな感じです。

<table>
  <tbody>
    <tr>
      <th>会社名</th>
      <td>株式会社ほげほげ</td>
    </tr>
    <tr>
      <th>連絡先</th>
      <td>03-1234-5678</td>
    </tr>
    <tr>
      <th>住所</th>
      <td>東京都ほげほげ区</td>
    </tr>
  </tbody>
</table>

CSSは以下のように指定していました。

table {
  border-collapse: collapse;
}

th,
td {
  border: solid 1px #aaa;
}

th {
  background-color: #CCFFFF;
}

不思議なのが、罫線が表示されるテーブルと表示されないテーブルがあったことです。背景色と一緒に”position:relative;”を指定すると線が消えるという情報も見かけましたが、罫線が消えていたテーブルでpositionは指定していませんでした。

何はともあれ後述する対処法で解決しましたので、備忘録として残しておきたいと思います。

背景色を指定したtableのセルで罫線が消えてしまう場合の対処法(Firefox/Safari)

対処法は簡単で、「background-clip:padding-box;」を追加するだけです。

table {
  border-collapse: collapse;
}

th,
td {
  border: solid 1px #aaa;
}

th {
  background-color: #CCFFFF;
  background-clip: padding-box;
}

background-clipでpadding-boxを指定し、背景の表示範囲をボーダーの内側までにすることで解決できます。
※background-clipの初期値はborder-boxで、ボーダーの外側まで背景画像もしくは背景色が表示されます。

あとがき

発生条件がいまいちわからないんですよね。とはいえ、対処法はハッキリしているので、背景色を指定したセルから罫線が消えてしまったら上述した方法をお試しください。