比較表示するのに便利な、おしゃれなテーブルの実装方法を紹介します。

最終完成イメージ

完成イメージは以下の通りです。

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

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

comparison-table-01

カスタマイズの手順

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

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

HTMLの記述

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

ほかのテーブルとデザインが被らないよう、tableに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>

列を追加したいときは、trのくくりをコピーして増やしてください。

比較テーブル用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;
	text-align: left;
}
table.hikaku td:nth-child(3) {
	background-color: #ffebd8; //右の列の背景色
	border-bottom: 1px solid #ff9933; //右の列の下ボーダー色
	width: 150px;
	text-align: left;
}
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です。

以下の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をさらに長くしても大丈夫です。

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

Follow me

-カスタマイズ
-

おしゃれな比較風テーブルの実装方法
この記事はいかがでしたでしょうか。
是非Healerの最新ニュース情報を、
いいねしてチェックしてください!

コメントを残す

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

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