最近ハマったのでメモ。
特定の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>