テーブルを横スクロールで表示する方法

目次

• はじめに
• 完成形
• 実装方法
• 最後に

はじめに

レスポンシブ対応するときに、スマホ用になおすのが難しいテーブルってありますよね？
そんなときに、横スクロールで表示してるところも多いのでその方法を紹介します。

完成形

通常時

見出し	見出し	見出し	見出し
内容	内容	内容	内容
内容	内容	内容	内容

表示できる幅が300pxのとき。はみでた部分は横スクロール表示

※横スクロールできます

実装方法

tableタグをdivで囲んでいます。そのdivに、「overflow: scroll;」をかけることで、枠からはみ出た部分をスクロール表示します。
その他注意点はソースコードのサンプルにコメントに入れてますので、確認してみてください(^^)

ソースコード（装飾部分のCSSは省略）

		<div class="tableWrap">
			<table>
				<tr>
					<th>見出し</th>
					<th>見出し</th>
					<th>見出し</th>
					<th>見出し</th>
				</tr>
				<tr>
					<td>内容</td>
					<td>内容</td>
					<td>内容</td>
					<td>内容</td>
				</tr>
				<tr>
					<td>内容</td>
					<td>内容</td>
					<td>内容</td>
					<td>内容</td>
				</tr>

			</table>
		</div>


		

		.tableWrap{
			/* ▼枠からでた部分をスクロール表示する */
			overflow: scroll;
			width: 300px;
		}
		table{
			border-collapse: collapse;

			/* ▼スクロールがスムーズになる */
			-webkit-overflow-scrolling: touch;
		}

		th,
		td{
			width: 100px;

			/* ▼セルが100px以下にならないようにする */
			min-width: 100px;
		}
		

最後に

いかがでしたか？スマホ用の表示方法も色々ありますが、状況に応じて 最適な実装方法は違うと思うので、選択肢の１つとして使ってみてください♪ また、以前にこんな記事も書いているので、よければご覧ください。

過去記事：一番かんたんなテーブルのレスポンシブ対応