メモ: CSS3で表を縞パンにする

久々にHTMLとCSSを書いていて、テーブルの奇数行と偶数行で背景色を変えようとしました。

業務アプリの一覧表示でよくある、シマシマの表ですね。

で、CSS3のnth-child()擬似クラスを知ったのでメモ。

こんな元表があったとして。

<table>
       <tr>
               <th>No.</th>
               <th>名前</th>
               <th>所属</th>
       </tr>
       <tr>
               <td>1</td>
               <td>鈴木</td>
               <td>幽霊事業部</td>
       </tr>
       <tr>
               <td>2</td>
               <td>佐藤</td>
               <td>モンスター本部</td>
       </tr>
       <tr>
               <td>3</td>
               <td>田中</td>
               <td>妖怪事業部</td>
       </tr>
       <tr>
               <td>4</td>
               <td>小林</td>
               <td>おばけ本部</td>
       </tr>
</table>

ずっっっとこんなふうに書いていたんだけれども。

<table>
       <tr class="odd">
               <th>No.</th>
               <th>名前</th>
               <th>所属</th>
       </tr>
       <tr class="even">
               <td>1</td>
               <td>鈴木</td>
               <td>幽霊事業部</td>
       </tr>
       <tr class="odd">
               <td>2</td>
               <td>佐藤</td>
               <td>モンスター本部</td>
       </tr>
       <tr class="even">
               <td>3</td>
               <td>田中</td>
               <td>妖怪事業部</td>
       </tr>
       <tr class="odd">
               <td>4</td>
               <td>小林</td>
               <td>おばけ本部</td>
       </tr>
</table>

tr.odd td
       {
       background-color: #fff;
       }

tr.even td
       {
       background-color: #f4f4f4;
       }

CSS3なら、擬似クラスなるものを使って、こうするだけなんですってね。

tr:nth-child(odd)
       {
       background-color: #fff;
       }

tr:nth-child(even)
       {
       background-color: #f4f4f4;
       }

元のテーブルをいじらなくてよい。素晴らしい。知らなかったよ。