【簡単実装】CSSのみでtableをレスポンシブ対応させる方法その2

更新日：2018年9月19日

レスポンシブ対応する時に頭を悩ませる代表格といえば……
そうです、tableですね。

約2年半前の記事に【簡単実装】CSSのみでtableをレスポンシブ対応させる方法をご紹介致しましたが、ご好評を頂きましたので今回はその第二弾となります。

以前の記事の場合ですと、横に長いtableには対応することが出来ませんでしたが、今回はそれに対応させる方法のご紹介です。
CSSのみで実装可能ですで、スマホ時には横に常時スクロールバーが表示させて対応させます。

ちなみに完成するtableは下記の通りです。
試しにブラウザのウィンドウ幅を思いっきり狭めてみると、横に常時スクロールバーが表示されるのが分かります。

それでは、上記のレスポンシブ対応したtableの作り方ですが、HTMLは例えば以下のように記述します。

	
名前
	
年齢
	
毛色
	
趣味
	
身長
	
住処
	
宝物
	
一言


	
トトロ
	
1302歳
	
灰色
	
オカリナ
	
2m
	
オオクスの虚
	
サツキから貰った傘
	
私の名前はトトロです。メイちゃんが私の名前を聞き間違えたことにより、トトロという名前ですっかり世間に浸透してしまいましたが、本当の名前はミミンズクといいます。お友達には私をそのまんま小さくしたような姿をしているズクと、毛色が真っ白で半透明のミンがいます。いつも3匹は仲良しです。今日もお昼寝して過ごすことにします。

なんてことない普通のtableです。大事なポイントはtableを.tb_hyouを付与したdivで囲っているということだけです。
任意のtableを作成した後、classを付与したdivで囲ってあげればいいということです。

CSSは例えば以下のように記述します。

.tb_hyou table {
	font-size: 14px;
}

.tb_hyou table th, .tb_hyou td {
	padding: 5px;
	border: 1px solid #ddd;
}

.tb_hyou table th {
	text-align: center;
	color: #FFF;
	background-color: #333;
}

これはtableの見た目を整える為の装飾用のCSSですので記述の必要はありませんが一応。
無視して頂いても大丈夫です。

では重要なCSSですが、以下のように記述します。

@media screen and (max-width: 480px) {

	.tb_hyou {
		overflow-x: scroll;
	}

	.tb_hyou::-webkit-scrollbar {
		height: 1px;
	}

	.tb_hyou::-webkit-scrollbar-track {
		background-color: #ccc;
		margin: 0 2px;
		border-radius: 5px;
	}

	.tb_hyou::-webkit-scrollbar-thumb {
		background-color: #666;
		border-radius: 5px;
	}

	.tb_hyou table {
		width: 700px;
	}

}

.tb_hyou table {
　width: 700px;
}
の700pxは任意の数値に変更して頂いて大丈夫です。
この場合、tableの幅を700pxに固定した上で、横に常時スクロールバーを表示させています。
これにて完成です。

これさえ知っていればどんなtableでもレスポンシブ対応可能になるかと思います。
お試し下さい。