CSSでテーブルの背景色を変えるシステム開発備忘録です。
と言うは、極たまにしか使わないので、忘れてしまうことが多くて。。。
<html>
<head>
<style>
#tableA tr:nth-child(odd) td {
background-color: #FF8888;
}
#tableA tr:nth-child(even) td {
background-color: #88FF88;
}
</style>
</head>
<body>
<table id="tableA">
<tr>
<td>セルA1</td><td>セルA2</td><td>セルA3</td>
</tr>
<tr>
<td>セルB1</td><td>セルB2</td><td>セルB3</td>
</tr>
<tr>
<td>セルC1</td><td>セルC2</td><td>セルC3</td>
</tr>
<tr>
<td>セルD1</td><td>セルD2</td><td>セルD3</td>
</tr>
<tr>
<td>セルE1</td><td>セルE2</td><td>セルE3</td>
</tr>
</table>
</body>
</html>
これは、疑似クラスの:nth-child(n)を使っています。
まず、疑似クラスとは、要素が特定の状態にある場合にスタイルを指定するものです。
例としてよく使われているaタグに使う疑似クラスを挙げます。
a:link{}
リンクする要素(ａ要素)のうち、まだ見ていない（キャッシュされていない）要素に対してスタイルを適用させます。
a:visited{}
リンクする要素(ａ要素)のうち、既に見た（キャッシュされている）要素に対してスタイルを適用させます。
今回のnth-child(n)は疑似クラスは指定した要素内のn番目の子要素にスタイルを適用することができます。
nにはodd、evenの他に数字や2nのように計算式を入れる事もできます。
#tableA tr:nth-child(odd) td で記述したセレクタは、
#tableAのtrのnth-child(odd)奇数行の状態にあるtdに対して、スタイルを適用することになります。
この辺りの詳細な説明は、ググってもらった方が良いですね。
尚、古いブラウザでは動かないことが有ります。例えばIE8とかの古いブラウザとかでは。
この辺りも別途考慮の必要？が有るなら調べて使用してください。
以上、【CSS】テーブルの背景色を交互に変える、CSSの備忘録でした。