【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】ワードプレスのカスタムメニュー機能を使う

WordPressではバージョン3.0より、管理画面内でメンテナンスができるカスタムメニューの機能が加わりました。WordPressで作成した固定ページや投稿記事のリンクをメニューに反映したり、動的にメニューを構築することができる便利な機能です。今回は、ワードプレスのカスタム...続きを読む

2015.08.18WordPress

【CSS】CSS3で実現するドロップシャドウ効果

画像処理のソフトなどには、文字やオブジェクトに影をつける「ドロップシャドウ」という機能があります。 ボタンや写真などに「ドロップシャドウ」使うことで立体的に表現することができるのでよく使われる効果のひとつです。 画像処理のソフトなどで行う「ドロップシャドウ」効果を...続きを読む

2015.02.09HTMLコーディング

【CSS】linear-gradient(グラデーション)を使ったボタン作成

CSSのlinear-gradient()関数を用いることで画像を使わずとも、グラデーション色のボタンを作成することができます。 ※矢印は、「Font Awesome」、文字はGoogle Fontsの「M PLUS Rounded 1c」を組み合わせております。 ボ...続きを読む

2021.02.19CSSHTMLコーディング

【WP】空き状況を表示するカレンダーを作成することができるBookingプラグイン5選

レストランやホテル、イベント会場などWEBサイトで、席の空き状況をカレンダーに表示して予約をスムーズに行う仕組みを見かけることがあると思います。 この空き状況を案内するカレンダーをWordPress上で作成することができるプラグインがありますのでご紹介します。 今...続きを読む

2015.02.26WordPress

美容室トップスタイル様WEBサイト制作

富士宮市にあるトータルビューティーサロン『美容室トップスタイル』様のWEBサイトを制作いたしました。南国ムードあふれる癒し系美容サロンをテーマにスタッフの笑顔で出迎えることができるデザインにいたしました。 クライアント美容室トップスタイル様 U...続きを読む

2015.04.08WEBサイト制作美容室