疑似クラスnth-childで作るおしゃれな比較風テーブル

nth-child-comparison-table-thumbnail

CSSの疑似クラスnth-childを使って、商品比較に便利なテーブルをカスタマイズしてみました。

最終完成イメージ

カスタマイズ完成イメージです。

他店舗サロン当院
料金について低価格。短時間のソフトマッサージもあり気分で選びやすいがその分割高。価格もちょっと高め。技術取得者の施術なので、持ちがよく長期で考えるとコスパ良し。
待ち時間いつでも気軽に行ける分、お客さんも多く待たされる。完全予約制ですぐ施術に入れる。待ち時間はほとんどなし。
メリットリラクゼーション効果が得られる。気分がリフレッシュされる。痛みや疲れの根本から改善し、健康な体を手に入れる。生活習慣の見直しやアドバイスを受けられる。

スマホでは、横がはみ出すのでスクロール処理をします。

nth-child-comparison-table-01

カスタマイズの手順

カスタマイズは以下の手順でおこないます。

  • HTMLの記述
  • 比較テーブル用CSSの記述
  • スマホ閲覧用横スクロールCSSの記述

HTMLの記述

HTMLでテーブルを記述します。

既存テーブルのセレクタとバッティングしないよう、全体を.hikakuで囲んでいます。

<div class="scroll-box">
<table class="hikaku">
<thead>
<tr>
<td></td>
<td class="top-radius">他店舗サロン</td>
<td class="top-radius2">当院</td>
</tr>
</thead>
<tbody>
<tr>
<td>料金について</td>
<td>低価格。短時間のソフトマッサージもあり気分で選びやすいがその分割高。</td>
<td>価格もちょっと高め。技術取得者の施術なので、持ちがよく長期で考えるとコスパ良し。</td>
</tr>
<tr>
<td>待ち時間</td>
<td>いつでも気軽に行ける分、お客さんも多く待たされる。</td>
<td>完全予約制ですぐ施術に入れる。待ち時間はほとんどなし。</td>
</tr>
<tr>
<td>メリット</td>
<td>リラクゼーション効果が得られる。気分がリフレッシュされる。</td>
<td>痛みや疲れの根本から改善し、健康な体を手に入れる。生活習慣の見直しやアドバイスを受けられる。</td>
</tr>
</tbody>
</table>
</div>

比較テーブル用CSSの記述

比較テーブル用CSSを追記してください。

コメントが付いているプロパティーで、色を自由にカスタマイズできます。

/*--------------------------------------
比較テーブル
--------------------------------------*/
table.hikaku {
    border: none;
    table-layout: fixed;
    margin: 30px 0;
    padding: 0;
    width: 100%;
    color: #616161; //テーブル全体の文字色
}
table.hikaku td {
    padding: 15px;
    width: 30%;
    background: #ffffff; //テーブル全体の背景色
    font-size: 14px;
    line-height: 1.7;
    letter-spacing: .1em;
    border-top: none;
    border-left: none;
    border-right: none;
}
table.hikaku td:nth-child(1) {
    background-color: #ffffff; //左の列の背景色
    width: 100px;
    font-size: 15px;
    text-align: center;
}
table.hikaku td:nth-child(2) {
    background-color: #f9f9f9; //真ん中の列の背景色
    width: 150px;
}
table.hikaku td:nth-child(3) {
    background-color: #ffebd8; //右の列の背景色
    border-bottom: 1px solid #ff9933; //右の列の下ボーダー色
    width: 150px;
}
table.hikaku td.top-radius,
table.hikaku td.top-radius2 {
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}
table.hikaku td.top-radius2 {
    color: #ff9933; //右の列の見出し色
}

スマホ閲覧用横スクロールCSSの記述

スマホ閲覧時は、幅が足りなくなるので右端が切れてしまいます。

表全体を横スクロールして見られるようにしているのが、テーブルをはさんでいる.scroll-boxです。

このクラスセレクタは、STINGER8には初めから付いています。STINGER8以外を使用している方は、新しく以下のCSSを追加してください。

/*--------------------------------------
テーブルを横スクロールさせる
--------------------------------------*/
.scroll-box table {
    max-width:initial;
}
.scroll-box {
    overflow-x: auto;
    margin-bottom:10px;
}
.scroll-box::-webkit-scrollbar {
    height: 5px;
}
.scroll-box::-webkit-scrollbar-track {
    border-radius: 5px;
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px;
    background: #f3f3f3;
}
.scroll-box::-webkit-scrollbar-thumb {
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    background: #ccc;
}

これで、横にスクロールできるようになるので、tdの幅150pxをさらに長くしても大丈夫です。

プロパティー「overflow-x」の解説
overflow-xプロパティは、横幅が指定された要素でその範囲内に内容が入りきらない場合に、横にはみ出た部分の表示方法を指定します。値をautoにすると、ブラウザーに依存になりますが、基本的にスクロールできるようになります。
疑似要素「::-webkit-scrollbar」の解説
疑似要素::-webkit-scrollbarは、スクロールバーのデザインを指定します。-webkit-と先頭につけることで、Google Chrome(Android)、Safari(iPhone)独自のデザインが可能となり、これを「ベンダープレフィックス」といいます。他にもFirefoxの-moz-、Operaの-o-、Internet Explorerの-mo-などがあります。

scrollbar-trackはバー全体、scrollbar-thumbは移動する部分のバーを指定してデザインします。

nth-child-comparison-table-02

このあたりは好みで変更してみてください。

nth-child-comparison-table-thumbnail
この記事が良かったら、いいねして
最新記事をチェックしてください!

Twitterで

コメントを残す

入力エリアすべてが必須項目です。メールアドレスが公開されることはありません。

内容をご確認の上、送信してください。

日本語が含まれない投稿は無視されます。(スパム対策)