CSS

CSSでテーブルの背景色を交互に変える方法

投稿日:2017年6月29日 更新日:

今さらですが…
CSSだけで表の背景色を交互に変える方法の覚え書き。
※IE8以下のブラウザには対応していません。
でも、マイクロソフトはIE8のサポートを終了したので、これからはどんどん使えそうです。(ようやく。。。)

nth-child疑似クラスを使う

行ごとに色を変える

↓ サンプル

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

 

↓ CSS

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

tr:nth-child(even)または、tr:nth-child(2n)偶数行の背景色を一気に設定できます。
tr:nth-child(odd)または、tr:nth-child(2n+1)奇数行の背景色
【ポイント】(odd)を記入すると奇数に対して、(even)を記述すると偶数に対して指定することができます。
tr:first-childth:first-child見出し(th)の背景色を設定できます。

 

↓ HTML

<table class="t-gyo">
  <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-gyo”を入れたテーブルのみ背景色がつく

 

列ごとに色を変える

↓ サンプル

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

 

↓ CSS

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

CSSの「tr」を「td」に変えるだけで、列の背景色を一気に設定できる。

 

↓ HTML

<table class="t-tate">
  <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>

 

nth-child疑似クラスについて

「n」というのは倍数を指定するときに使用。「:nth-child(1)」と記述すれば1番目(先頭)を、「:nth-last-child(1)」と記述すれば最後の1つを装飾できます。値には1以上の整数なら何でも指定できますので、「:nth-last-child(2)」と記述すれば「最後から2番目だけ」を装飾できます。

例)

先頭から3つ(1,2,3番目)だけ

:nth-child(-n+3)

*「-n」=マイナス記号の記述を忘れないよう注意

1番目(先頭) :nth-child(1)
7番目以降(7,8,9,番目)を対象に :nth-child(n+7)
末尾から3つだけ :nth-last-child(-n+3)
末尾から4つ目以前 :nth-last-child(n+4)
最後の1つだけ :nth-last-child(1)
最後から2番目だけ :nth-last-child(2)
偶数番目(2,4,6……番目) :nth-child(2)
奇数番目(1,3,5……番目) :nth-child(2n+1)
3の倍数(3,6,9……) :nth-child(3n)
1から始めて3つおき :nth-child(3n+1)
2から始めて3つおき :nth-child(3n+2)

本サイトの内容に誤りや不正確な記述がある場合やサンプルに基づくいかなる結果も一切の責任を負いかねますので、あらかじめご了承ください。

-CSS

執筆者:

関連記事

レスポンシブサイト★ウインドウサイズにあわせて画像を拡大縮小させる

レスポンシブサイトでの画像のリサイズ問題   ウインドウサイズに合わせて、画像を拡大縮小させる方法。 CSSだけで解決できます。     <css>  img{ width:100%; max-wid …

フロート解除★clearfixの使い方

フロート解除の指定方法 <CSS> .clearfix:after { content:” “; display:block; clear:both; }   <HTML> <div …

CSS★floatの解除にclearfix

floatの解除方法はいくつかありますが、 clearfixを使う方法が1番使い勝手がよいのでメモ。 floatを設定すると、要素が浮くことになり、 高さが消失してしまいます。 きちんとfloatを解 …

今からレスポンシブサイトを作る時のメディアクエリとブレイクポイント【2017年度版】

新しくサイトを作ることになった。 もちろん、レスポンシブ対応で。 そこで改めて、ブレイクポイントを考えてみことにした。 Googleでは「モバイルファースト」を推奨している。さらに「モバイルファースト …

CSS★全ての要素にBorder-boxを適用する

仕上がりイメージからレイアウトをコーディングするとき、マージンやボーダーなど横幅の計算がややこしくて手こずっていました(涙) そんな悩みを解消してくれるありがた〜いセレクタ「box-sising」! …

サイト制作・グラフィック制作をしているデザイナーです。制作で躓いたことの備忘録としてこのブログを始めました。
たくさんの検索結果から、実際に何度も何度も自分で試してみて、自分に合うなと思った方法やうまくいった方法をこのブログに書き留めています。
プログラム関係のことはもっぱらコピペ派。
自分でゴリゴリ書くことはできません。。。プログラムが分かる人がうらやましいです。
そんな私でもなんとかサイト制作ができるのはグーグル先生と貴重な情報をおしげもなく公開してくださっているたくさんの方々のおかげ。
有志のみなさまに日々感謝しつつ制作させていただいています。