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

更新日：2016年4月3日

今ではほとんどの人が知っているであろうレスポンシブWEBデザイン。
数年前に比べてレスポンシブに対応しているサイトが劇的に増えたなと感じる今日この頃。ちなみに当サイトも対応しております。

さて、レスポンシブ対応する時に頭を悩ませるのがこれまた出ました。
そう、tableです。

HTMLの中でも何故かtableだけは独自ルールが複数存在していて、その都度WEB担当者を悩ませます。
WEB担当者の天敵みたいな存在です。

そんなtableですが、レスポンシブ対応させるのに一苦労するという人は少なくありません。
例えばスマホで閲覧する時にはサイトの横幅が狭くなってしまうので、それに合わせてtableの横幅まで狭くなると非常に見づらいものとなってしまうのです。

前置きが長くなってしまいましたが、それではtableを凄まじく簡単にレスポンシブ対応させる方法のご紹介です。
なんとわずか2行のCSSのみで実は解決します。

ちなみに完成するtableは下記の通りです。
きちんとレスポンシブ対応しているので、試しにブラウザのウィンドウ幅を思いっきり狭めてみても見づらくなりませんよね。

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

	
名前
	
トトロ


	
年齢
	
1302歳


	
毛色
	
灰色


	
趣味
	
オカリナ


	
一言
	
私の名前はトトロです。メイちゃんが私の名前を聞き間違えたことにより、トトロという名前ですっかり世間に浸透してしまいましたが、本当の名前はミミンズクといいます。お友達には私をそのまんま小さくしたような姿をしているズクと、毛色が真っ白で半透明のミンがいます。いつも3匹は仲良しです。今日もお昼寝して過ごすことにします。

なんてことない平凡なtableです。
重要なのはtableに.tb_hyouを付与しているってことだけです。

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

.tb_hyou {
	font-size: 14px;
}

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

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

これはtableの見た目を整える為の装飾用のCSSです。
記述してもしなくても問題ありませんが、一応。

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

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

	.tb_hyou {
		width: 95%;
	}

	.tb_hyou th, .tb_hyou td {
		width: 100%;
		display: block;
		border-top: none;
	}

}

この中で本当に必須のCSSは、
width: 100%;
display: block;
の2行だけです。
その他のCSSは見た目を整える為の装飾用のCSSですので、必須ではありません。

この2行で何をしているのかというと、tableのthとtdをブロック要素にした上で、横幅いっぱいに広げています。
そうすることで、レスポンシブに対応した見やすいtableが実現します。

レスポンシブWEBデザイン対応のサイトであれば、非常に使い所が多いと思います。
2行で簡単に対応出来るということを頭の片隅にでも入れておきましょう。

今回の方法ではtableをレスポンシブ対応させられなかったという方は下記の第二弾の記事を読んで頂ければ幸いです。
【簡単実装】CSSのみでtableをレスポンシブ対応させる方法その2