【CSS】レスポンシブデザインに対応した表の作り方

　近年はサイト制作の際にはスマートフォン対応することを考慮した上でコーディングなどを行う必要性が出てきました。

そんな時に結構手こずるのがtableレイアウトだったりします。
スマートフォンでtableレイアウトを見ると幅が狭いために見づらかったりしますし、PCサイトの時にはtableレイアウトでお問い合わせフォームを作っている時にはスマートフォンサイトの際に縦に表を並べておいた方が見やすかったりしますよね。
当サイトのお問い合わせフォームも、PCで見た時にはtableレイアウト、スマートフォンで見た時には表が縦になるようにレイアウトしています。

そこで今回は、レスポンシブデザインに対応した表の作り方をご紹介したいと思います！

まずデモページとして以下のページを用意しました。
PCから見ている方はWebブラウザの幅を狭めるとレイアウトが変わり、スマートフォンから見ている方はスマートフォンの向きを縦と横にそれぞれ変えるとレイアウトが変わると思います！
デモページ

レスポンシブデザインに対応した表を作るには

　まず、レスポンシブデザインに対応した表を作るにはtableタグではなく、ulタグで表を作ることで可能になります！

tableタグでもレスポンシブデザイン対応できるらしいのですが、自分がやってみた結果、どうしても上手くいかなかったので、今回はulタグで作成する方法で解説します。

1. ulタグでソースを記述

　それではまず、ulタグで表のもととなるソースを記述します。

見本のソースとして以下のように用意しました。

<ul class="table">
	<li>
		<div class="table-1">見出し1</div>
		<div class="table-2">あああ</div>
	</li>
	<li>
		<div class="table-1">見出し2</div>
		<div class="table-2">いいい</div>
	</li>
</ul>

2. CSSでレイアウトを作成

　続いて、CSSでレイアウトをtableレイアウトになるようデザインします。
CSSは今回以下のように記述しました。

.table {
	box-sizing: border-box;
	border: 1px solid #000;
	border-top: 0;
	width: 500px;
}

.table li {
	background: #ccc;
	overflow: hidden;
}

.table-1 {
	box-sizing: border-box;
	border-top: 1px solid #000;
	clear: both;
	float: left;
	padding: 10px;
	width: 150px;
}

.table-2 {
	background: #fff;
	box-sizing: border-box;
	border-top: 1px solid #000;
	border-left: 1px solid #000;
	margin-left: 150px;
	padding: 10px;
}

ulの幅を決める

　まず、ulの幅を決めましょう。

これは表の幅になるので、どれくらいの幅の表にしたいかによって幅のサイズを決めます。

見出し部分と内容部分のCSSを設定する

　続いて、見出し部分と内容部分のCSSを設定します。

今回は見出し部分を<div class=”table-1″>～</div>、内容部分を<div class=”table-2″>～</div>としましたが、class名は任意のものを競っていただけたらと思います。

CSSの設定の流れとしては以下になります。

1. 1liに対して見出し部分の背景色とoverflow: hiddenを設定する。
   ※今回は背景色に#cccを設定しています。
2. 2見出し部分に対してclear: bothとfloat: leftと幅を設定する。
   ※今回は幅をwidth: 30%と設定しました。
3. 3内容部分に対して、背景色と見出し部分の幅分、margin-leftを設定する。
   ※今回は背景色を#fffと設定し、また見出し部分をwidth: 30%と設定したので、ここではmargin-left: 30%と設定します。

※見出し部分に背景色を設定するとしたら、liに対して背景色を設定するように！

　見出し部分に背景色を設定する場合、普通だったらそのまま見出し部分に対して背景色を設定しそうですが、必ずliに対して背景色を設定するようにしてください！

何故このように設定するのかというと、見出し部分に背景色を設定してしまった場合、以下のようになってしまうのです。。。

これでは表としてはレイアウトがおかしくなっていますよね…

なので、liに背景色を設定しておくことで見出し部分の背景色も設定されたように見せる…という手法をとる必要があります。

ちなみに内容部分の背景色は別に設定したい…という場合は、内容部分そのものに背景色を設定して大丈夫です(^-^)

表の枠線はulに設定するようにする

　そして表の枠線は、基本的にはulに設定しておきましょう。

その際

• ulのborder-topは値を0にする
• 見出し部分、内容部分にborder-topの数値を設定
• 内容部分にはborder-leftの数値を設定

という工程を踏んでいます。

3. スマートフォン用にCSSの設定を変更

　以上の設定でulタグで表が作れたかと思います！
なので続いてスマートフォン用のCSSを設定しましょう。

今回は以下のようにCSSを記述しました。

@media (max-width: 667px) {

	.table-1 {
		float: none;
		padding: 10px;
		width: 100%;
	}

	.table-2 {
		border-left: 0;
		margin-left: 0;
	}

}

1. 見出し部分のfloatを解除してwidthを100%にする

　まず、見出し部分のfloatを解除して、widthを100%に設定しましょう。

2. 内容部分のborder-leftとmargin-leftの値を0にする

　続いて内容部分のborder-leftとmargin-leftの値を0にすることで、見出し部分と内容部分が縦に並ぶようになります！

まとめ

　以上がレスポンシブデザインに対応した表の作り方になります！

tableのデザインによってはulの設定なども変えていく必要があるかと思いますので、今回ご紹介した方法を元に設定を変更してみるのもよいかと思います(^-^)