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

関連記事

【CSS】CSS3による枠線の新しい表現方法

CSS3より定義された「Border Radius」「Border Image」を使うことで角丸のボックスや、罫線の装飾によってこれまで画像で作成していた要素をCSSのみでデザインすることができるようになりました。 角丸(border-radius) 「b...続きを読む

2015.02.08HTMLコーディング

【JavaScript】文字設定をレスポンシブ対応してくれるライブラリ『FlowType』

『FlowType』はレスポンシブデザインのサイトにおいて、横幅の変化に応じて設定されている文字の大きさや行の高さを自動的に調整をしているJavaScriptライブラリです。 イメージ ダウンロード ライブラリのダウンロードはこちらから行うことが出来ます。 ...続きを読む

2015.02.10HTMLコーディング

株式会社寺坂商店との業務提携のお知らせ

拝啓 時下ますますご清栄のこととお喜び申し上げます。 平素は格別のご高配を賜り、厚く御礼申し上げます。 さて、このたび当社は、株式会社寺坂商店(本社:静岡県藤枝市藤枝5-17-3、代表取締役:寺坂 祐紀)との間で、業務提携を行うことを決議いたしましたので、お知らせい...続きを読む

2022.07.22

富士山本宮浅間大社「桜」フォトギャラリー

富士宮にある富士山本宮浅間大社で桜を見てきました。ちょうど天気もよく青空に映えるキレイな桜を写真に撮ることもできました。 富士山本宮浅間大社は、富士山の龍脈の気が留まる龍穴(大地の気がみなぎる場所)のパワースポットとして開運神社として知られています。 主祭神には、神界...続きを読む

2015.04.09フォトギャラリー

【デザイン】想像力を刺激するようなクリエイティブな本棚

今回は、タイトルの通り普通の本棚とは異なるアイディアにあふれたクリエイティブな本棚のデザインをまとめてみました。 “Bias of Thoughts” 目の錯覚を利用した不思議なデザインです。 Link:http://melbournea...続きを読む

2015.02.15インスピレーション