レスポンシブデザインをやるときに必ずテーブルの対応で悩んでしまいます。今回はよく使う方法を実例を作ってまとめてみました。
簡単なCSSで実装する方法もあるので、案件に合わせて参考にしてもらえると嬉しいです！
CSSの記述箇所を見やすくするために、メディアクエリは「max-width」での指定とし、ブレイクポイントは720pxに設定しています。
まずは、デモをご覧ください。

デモ

• Demo

Chromeなどのモダンブラウザでご覧ください。
※PCの場合はブラウザのウィンドウの横幅を縮めて確認してください。

テーブルを作る

それでは下準備をしましょう。簡単にHTMLとCSSを記述していきます。

HTML

<div id="demo01">
	<table>
		<thead>
			<tr>
				<th>プラン</th>
				<th>データ容量</th>
				<th>バージョン管理</th>
				<th>料金</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>無料プラン</td>
				<td>5GB</td>
				<td>なし</td>
				<td>無料</td>
			</tr>
			<tr>
				<td>個人事業主プラン</td>
				<td>30GB</td>
				<td>１ヶ月まで</td>
				<td>1000円/月</td>
			</tr>
			<tr>
				<td>法人プラン</td>
				<td>100GB</td>
				<td>無制限</td>
				<td>5000円/月</td>
			</tr>
		</tbody>
	</table>
</div>

ハイライトしている部分に「id」をつけておきましょう。今回作るのは3つなので、それぞれ「demo01」「demo02」「demo03」としておきます。

CSS

table {
	border-top: 1px solid #4f4d47;
	border-right: 1px solid #4f4d47;
	width: 640px;
	border-spacing: 0;
	margin: 0 auto;
}
th, td {
	border-bottom: 1px solid #4f4d47;
	border-left: 1px solid #4f4d47;
	text-align: center;
	padding: 5px;
}
th { background-color: #61c5bb; color: #fff;}

横幅721px以上は一律で上記のCSSがあてられるようにしておきます。下準備はこの辺で、実際にレスポンシブ対応をしていきたいと思います。
以降は全て「@media screen and (max-width: 720px){}」内に記述していきます！

01.レイアウトを変更する

テーブルをスマホの横幅にあわせて収まるようにCSSでレイアウトを変更する方法です。

レスポンシブのポイント

まずはこのようにタイトル部分の「thead」は「display:none」で非表示にし、他の「tr」、「td」は「display:block」で縦並びに切り替えるようにCSSを記述していきましょう。

CSS

#demo01 table { width: 100%; border:none; padding: 10px;}
#demo01 thead { display: none;}
#demo01 tr {
	border-top: 1px solid #4f4d47;
	display: block;
	margin-bottom: 20px;
}
#demo01 td {
	border-right: 1px solid #4f4d47;
	border-bottom: none;
	display: block;
	padding: 0;
}

1行目はテーブル自体がどの横幅でもフィットするように「table」に「width:100%」を指定しておきます。2、5、11行目は前述の通り「display:none」、「display:block」の記述を。
「tr」は１つの表として見せたいので、解り易いように「margin-bottom:20px」でスペースを確保しておきます。

レスポンシブのポイント

このままでは各項目のタイトルがないので、擬似要素「:before」を使って「td」の前にブロック要素を入れこみ、「content」でタイトルを付けていきます。

CSS

/* tdのデザイン */
#demo01 td:nth-of-type(1) { background-color: #61c5bb; color: #fff;}
#demo01 td:last-child { border-bottom: 1px solid #4f4d47;}
	
/*td:beforeのデザイン*/
#demo01 td:before {
	background-color: #f5f3ec;
	color: #4f4d47;
	display: block;
}

/* contentでタイトルを追加 */
#demo01 td:nth-of-type(2):before { content: "データ容量";}
#demo01 td:nth-of-type(3):before { content: "バージョン管理";}
#demo01 td:nth-of-type(4):before { content: "料金";}

6～9行目の「td:before」で「td」の前にブロック要素を加えておきます。このままではただの空要素となってしまうので、13～15行目でタイトルを入れ込みます。

「:nth-of-type(n)」はCSS3から登場したセレクタで、「n」の箇所に数字を入れて使います。ここでは「td」の「n番目」の要素にスタイルを適用させます。
さらに「before」を組み合わせると、「td」の「n番目」の「before」要素を指定できます。
「nth−of−type」、「before」の記述順を間違えると、セレクタの指定が正しくできませんのでご注意ください。

正しく指定できたら、「content」で各タイトルのテキストを入れて完成です！

02.スクロールを使用する

レスポンシブ時にテーブルをスクロールさせる方法です。
行と列が入り組んでいるものやセルの結合が多い複雑なテーブルなどにおすすめですが、横スクロールはなかなか気付かれにくいので、実装時は工夫が必要です。

レスポンシブのポイント

次のCSSの通り、実装はとても簡単でラッパー要素「demo02」の横幅、ここではレスポンシブ時のブラウザのウィンドウサイズが横幅になり、元のテーブルの横幅の固定値（640px）を超えたらスクロールするという仕組みです。

CSS

#demo02 {
	box-sizing: border-box;
	border-right: 1px solid #4f4d47;
	overflow-x: scroll;
	-webkit-overflow-scrolling: touch;
}
#demo02 table { border-right: none;}

5行目の「overflow-x:scroll」を記述してスクロールを設定します。これでウィンドウの横幅がテーブルの横幅640px以下になるとスクロールで表示されます。
６行目の「-webkit-overflow-scrolling: touch」はiphoneの慣性スクロールを実装するプロパティで、スマホでスワイプするとなめらかに動きます。

03.レイアウトを変更し、一部をスクロールさせる

上記２つを合わせた形です。
左に各項目のタイトルが固定されて、右の項目がスクロールで動くパターンです。
イベントのスケジュールなどに使うと便利ですね！

レスポンシブのポイント

まず「th」「td」の各項目を縦並びにしてテーブルのレイアウトを変更します。

CSS

#demo03 table { width: 100%;}

/*thとtdを縦並びにする*/
#demo03 th,
#demo03 td { display: block;}

1行目で「table」をウィンドウサイズにフィットさせるために横幅100%にします。
4~5行目でタイトルと各項目の「th」と「td」に「display:block」を指定して縦並びにしましょう。

レスポンシブのポイント

ここでは各項目を囲っている「tr」や「thead」「tbody」をすべて横並びにしてテーブルのレイアウトを変更していきます。

CSS

/*trを横並びにする*/
#demo03 tr { font-size: 12px; display: inline-block;}

/*theadとtbodyをblock要素にしてfloat*/
#demo03 thead { display: block; float: left;}

2行目で「tr」に「display:inline-block」を指定して横並びにします。
「inline-block」を使うと隙間ができるので「margin-right:-6px」で詰めておきます。
5行目で「thead」と「tbody」をブロック要素にして「float:left」で横並びにします。

レスポンシブのポイント

「tr」はさきほど設定した「inline-block」ですでに横並びになってはいるのですが、
今の状態では「tr」の横幅の合計が大きいためカラム落ちしてしまいます。

CSS

#demo03 tbody {
	display: block;
	overflow-x: scroll;
	-webkit-overflow-scrolling: touch;
	white-space: nowrap;
}

/*その他装飾*/
#demo03 tbody tr { width: 60%; margin-right: -6px;}/*px指定だとはみ出る*/
#demo03 tbody td:first-child { background-color: #f5f3ec;}

そこで5行目の「white-space:nowrap;」で改行なしを設定してカラム落ちを無くし、左に寄せていきます。
これは半角スペース、タブ、改行の表示を設定するプロパティです。
この状態で4行目の「tbody」に「overflow−x:scroll」を設定すればはみ出た部分は横並びを保ちつつスクロール表示になります。

CSSを使ったテーブルのレスポンシブ対応いかがだったでしょうか？
見やすく更新しやすいテーブルを作りたいですね！

• ツイート
•