【CSS】互い違いに行の色を変えるテーブルデザイン

css-table-design

CSS3では、nth-childの疑似クラスが定義されて、CSSだけで、テーブル<table>デザインをよりわかりやすく設計することができるようになりました。

nth-child(n)では、n番目の子となる要素にスタイルを適用することができるため、<tr>や<td>など同じ要素が続くテーブル<table>内において、何番目の行、何番目の列かを指定してスタイルを指定することができます。

実際に表示されるテーブル

First Column Second Column Third Column Fourth Column
First Row First Row First Row First Row
Second Row Second Row Second Row Second Row
Third Row Third Row Third Row Third Row
Fourth Row Fourth Row Fourth Row Fourth Row

HTML

<table class="table-design-set-1">  
  <thead>  
    <tr>  
      <th>First Column</th>  
      <th>Second Column</th>  
      <th>Third Column</th>  
      <th>Fourth Column</th>  
    </tr>  
  </thead>  
  <tbody>  
    <tr>  
      <td>First Row</td>  
      <td>First Row</td>  
      <td>First Row</td>  
      <td>First Row</td>  
    </tr>
    <tr>  
      <td>Second Row</td>  
      <td>Second Row</td>  
      <td>Second Row</td>  
      <td>Second Row</td>  
    </tr> 
    <tr>  
      <td>Third Row</td>  
      <td>Third Row</td>  
      <td>Third Row</td>  
      <td>Third Row</td>  
    </tr> 
    <tr>  
      <td>Fourth Row</td>  
      <td>Fourth Row</td>  
      <td>Fourth Row</td>  
      <td>Fourth Row</td>  
    </tr> 
  </tbody>  
</table> 

CSS

互い違いにする箇所は tr:nth-child(2n+1) になります。(2n+1)を指定することで奇数行に対してスタイルを設定しています。

table.table-design-set-1 {
    border-radius: 0;
    box-shadow: 0 3px 0 rgba(0, 0, 0, 0.04), 0 0 0 1px #E8E8E8 inset;
    margin-bottom: 15px;
    overflow: hidden;
    width: 100%;
    border-spacing: 0;
    background: none repeat scroll 0 0 #FFF;
}
table.table-design-set-1 thead {
    background: none repeat scroll 0 0 #298CC3;
    color: #FFFFFF;
}
table.table-design-set-1 thead th {
    padding: 10px 15px;
    text-align: left;
}
table.table-design-set-1 tbody td {
    border-bottom: 1px solid #E8E8E8;
    padding: 9px 15px;
}
table.table-design-set-1 tbody tr:nth-child(2n+1) {
    background: none repeat scroll 0 0 #F7F7F7;
}

少しアレンジにして行をマウスオーバーしたときに背景の色を変えるようにしてみました。

実際に表示されるテーブル

First Column Second Column Third Column Fourth Column
First Row First Row First Row First Row
Second Row Second Row Second Row Second Row
Third Row Third Row Third Row Third Row
Fourth Row Fourth Row Fourth Row Fourth Row

CSS

[hover]と使ってマウスオーバーしたときに背景の色を変えるようにしてみました。

table.table-design-set-2 {
    border-radius: 0;
    box-shadow: 0 3px 0 rgba(0, 0, 0, 0.04), 0 0 0 1px #E8E8E8 inset;
    margin-bottom: 15px;
    overflow: hidden;
    width: 100%;
    border-spacing: 0;
    background: none repeat scroll 0 0 #FFF;
}
table.table-design-set-2 thead {
    background: none repeat scroll 0 0 #298CC3;
    color: #FFFFFF;
}
table.table-design-set-2 thead th {
    padding: 10px 15px;
    text-align: left;
}
table.table-design-set-2 tbody td {
    border-bottom: 1px solid #E8E8E8;
    padding: 9px 15px;
}
table.table-design-set-2 tbody tr td {
    transition: background-color 0.3s ease 0s;
}
table.table-design-set-2 tbody tr:nth-child(2n+1) td {
    background: none repeat scroll 0 0 #F7F7F7;
}
table.table-design-set-2 tbody tr:hover td {
	background: none repeat scroll 0 0 #EBF6F7;
}

背景色は<tr>への指定から<td>へ変更しています。

nth-childと同じようCSS3で定義された[transition]を使ってマウスオーバーのときのアニメーションを指定することもできます。

関連記事

【WP】ユーザーの一覧、ユーザー別に最新記事を表示する方法

キュレーションサイトなど最近では複数のライターによって運営される情報サイトをよく見ることができます。そのようなサイトにおいて、ユーザーの一覧を表示する、さらには1ページ内にユーザー事に最新記事を表示するといったページがほしいときがあります。 今回は、WordPressでユー...続きを読む

2016.07.14WordPress

藤枝おんぱく『東海道音楽祭~つながりのみち~』 in 大慶寺(4/18)

藤枝おんぱくのオープニングイベントより、『東海道音楽祭~つながりのみち~』 in 大慶寺(4/18)夜のフォトショットをお届けします。お寺を幻想的に彩るキャンドルナイト。普段とは違う雰囲気に、クラシック、アコースティック、フォルクローレなど様々なジャンルの音楽を楽しました。 ...続きを読む

2015.04.20フォトギャラリー

【WP】5段階評価ができる「Yet Another Stars Rating」の導入方法

商品などのレビューに評価として星がついているのを見かけることがあると思います。外部からの評価として商品購入の参考にもなります。 今回はWordPress上の記事に5つ星の評価をつけることができるプラグイン「Yet Another Stars Rating」の導入方法をご...続きを読む

2015.04.15WordPress

【WP】WordPress5.0の編集エディターを旧バージョンに戻す方法

WordPressのバージョンが、これまでの4.0の系統から5.0系統の最新版へのリリースとなりました。 安全性やバグの修正はもちろんですが、今回、5.0系統の最新リリースで大きく変わったのが投稿時の編集エディターとして「Gutenberg」が標準採用されたことだと思います...続きを読む

2019.02.13WordPress

【WP】ウェブサイトのパフォーマンスを高めるためのプラグイン

Googleよりウェブサイトの制作・管理を行うウェブマスター向けのガイドラインが告知されております。このガイドラインの目的は「ガイドラインに沿ってサイトを作成すると、Google がサイトを認識し、インデックスに登録し、ランク付けをするプロセスをスムーズにおこなう手助けとなります...続きを読む

2015.03.23WordPress