tdタグにbackground-colorがセットされているとtrのbackground-colorが効かなく見えるのを解決する

最近ハマったのでメモ。

特定のtrタグにbackground-colorを付与しようとしたら効かない。試しにtdタグに付与してみると効く。

どうやら、下位のtdタグにbackground-colorがセットされていると、親のtrタグへbackground-colorをセットしても、 無効になるようだ tdのbackground-colorが優先されて、trのbackground-colorが見えなくなる。（追記：無効になるわけではなかったので修正しました。）

なお、以下の例でjQueryを使っているのは、既存のWebアプリ側でHTMLが構築されていて、後から操作するしかなかったため。

background-colorが効かないパターン

<style type="text/css">
#bg td {
  background-color: gray;
}
</style>
<script>
$(document).ready(function () {
  // trタグに対して一括でbackground-color指定
  $('tr').css('background-color', 'red');
});
</script>
<table>
  <!-- こっちにはbackground-colorが効かない -->
  <tr id="bg">
    <td>A</td>
    <td>B</td>
  </tr>
  <!-- こっちにはbackground-colorが効く -->
  <tr>
    <td>A</td>
    <td>B</td>
  </tr>
</table>

background-colorが効かせるパターン

これを解決するには、tdタグのbackground-colorをtransparentにしてしまえば良い。

<style type="text/css">
#bg td {
  background-color: gray;
}
</style>
<script>
$(document).ready(function () {
  // tdタグのbackground-colorを無効にする
  $('td').css('background-color', 'transparent');
  // trタグに対して一括でbackground-color指定
  $('tr').css('background-color', 'red');
});
</script>
<table>
  <tr id="bg">
    <td>A</td>
    <td>B</td>
  </tr>
  <tr>
    <td>A</td>
    <td>B</td>
  </tr>
</table>