iscle [イズクル] - あなたの生活に役立つネタを!

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

竹中文人
執筆者:
[最終更新日]2014/12/23
[カテゴリ]Web・IT

table-color01

表(テーブル)を分かりやすく綺麗に表示する方法として、行ごと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”を入れたテーブルのみ色が付くようにしてあります。

▼デモサンプル

1行目左 1行目右
2行目左 2行目右
3行目左 3行目右
4行目左 4行目右

列ごとに色を変える

▼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”を入れたテーブルのみ色が付くようにしてあります。

▼デモサンプル

1列目 2列目 3列目 4列目
1列目 2列目 3列目 4列目