【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]を使ってマウスオーバーのときのアニメーションを指定することもできます。

関連記事

【無料】商用利用OKシームレステクスチャ「木目パネル(ヒノキ風)」素材

自然の木目を表現したシームレスの無料で使えるテクスチャです。ヒノキの木目パネル、壁、フローリングのようなイメージに仕上げています。継ぎ目のないシームレス加工をしているテクスチャです。テクスチャマッピングやタイル敷の背景素材などにお使いいただけます。商用利用OKのフリー素材...続きを読む

2018.09.14シームレステクスチャ

【フォト】第41回金比羅山・瀬戸川桜まつり

2019年3月25日(月)~4月7日(日)に開催された第41回金比羅山・瀬戸川桜まつり。藤枝市の中心を流れる瀬戸川沿いの両岸と金比羅山は、約800本以上ものソメイヨシノがあり、桜の名所として知られています。今年の桜の開花は4月に入ってからが満開でした。今回撮影したのは、夕暮れの瀬...続きを読む

2019.04.15フォトギャラリー

【デザイン】リアルの花を使った美しいイラストレーションの世界

今回は素敵だなと思ったアーティストさんの作品をご紹介します。表題のとおり、リアルの花や自然のものを使い、美しくかわいらしいイラストレーションの作品を手掛ける Lim Zhi Wei さん。シンガポールを拠点に活動されているアーティストです。 Lim Zhi Wei 彼...続きを読む

2015.02.16インスピレーション

【フォト】吉田町川尻海岸『幸福呼ぶ鳥居~初日の出~』

静岡県吉田町にある川尻海岸では年始の期間限定で『幸福呼ぶ鳥居』がお目見えします。鳥居に朝日が昇る様子は幻想的です。初日の出の日は、多くの方々でにぎわっていました。 フォトギャラリー ※写真をクリックすると拡大表示します。 [gallery link="file" col...続きを読む

2017.01.01フォトギャラリー

【WP】author.phpを使用したページでユーザー名が表示されない?

ワードプレスでは、テーマに[author.php]を用いると、ユーザーアカウント事の記事の一覧ページを作成することができます。[author.php]は、アーカイブページの分類に入りますので、[author.php]が無い場合は[archive.php]が反映されます。 ユ...続きを読む

2018.08.10WordPress