コピペOK！CSSで表の背景色を交互に変えるコード

表（テーブル）を分かりやすく綺麗に表示する方法として、行ごとor列ごとに背景色を変えるという方法があります。しかしHTMLのコードに各行・列ごとに色を指定していくのはとても面倒です。行数・列数が少ない表であれば一つ一つ指定していくのも可能でしょうが、多い表であれば大変な作業ですね。さらに、途中に行・列を追加したら手動でやり直しということにもなりかねません。

ここは自動で交互に背景色が変わるように設定したいものです。

CSSだけで背景色を交互に変えることが可能！

実はCSSだけで表の背景色を交互に変えることができます。コピー＆ペーストだけで出来るので、ぜひ活用してみてください！
※IE8以下のブラウザには対応していません。

行ごとに色を変える

▼CSS

.t-line tr:nth-child(odd) td {  
  background-color: #EAF6FD;  
}
.t-line tr:nth-child(even) td {  
  background-color: #EFEFEF;  
}  
 

※（odd）を記入すると奇数に対して、（even）を記述すると偶数に対して指定することができます。

▼HTML

<table class="t-line">
  <tr>
    <td>1行目左</td>
    <td>1行目右</td>
  </hr>
  <tr>
    <td>2行目左</td>
    <td>2行目右</td>
  </hr>
  <tr>
    <td>3行目左</td>
    <td>3行目右</td>
  </hr>
  <tr>
    <td>4行目左</td>
    <td>4行目右</td>
  </hr>
</table>

※tableタグのclassに“t-line”を入れたテーブルのみ色が付くようにしてあります。

▼デモサンプル

列ごとに色を変える

▼CSS

.t-row td:nth-child(odd) {
    background:#EAF6FD;
}
.t-row td:nth-child(even) {
    background:#EFEFEF;
}

▼HTML

<table class="t-row">
  <tr>
    <td>1列目</td>
    <td>2列目</td>
    <td>3列目</td>
    <td>4列目</td>
  </tr>
  <tr>
    <td>1列目</td>
    <td>2列目</td>
    <td>3列目</td>
    <td>4列目</td>
  </tr>
</table>

※tableタグのclassに“t-row”を入れたテーブルのみ色が付くようにしてあります。

▼デモサンプル