• Facebook
  • Twitter
  • RSS
月別
コツコツあつめるWeb作りのためのたね たねっぱ!Web系情報ブログ Webのお役立ちネタ配信中!

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

投稿者アイコン
2023/05/09
書いた人:
futappa_staff
カテゴリ:
CSS
858 views

レスポンシブやスマホ対応のときに使えるテクニック!テーブルを横スクロールで表示する方法を紹介します。

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

目次

はじめに

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

完成形

通常時

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

表示できる幅が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;
		}
		

最後に

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

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


この記事を読んだ人はこんな記事も読んでいます