レスポンシブデザイン、テーブルを横スクロールさせる方法

シュウ

今回はレスポンシブデザイン、テーブルを横スクロールさせたい!

こんな方に読んでほしい

レスポンシブデザインを学び始めた方へ
レスポンシブ講座Part04になります。
今回は「テーブルを横スクロールさせる」について解説しております。

レスポンシブデザインとは、表示領域の幅によって見え方が変わるデザイン(Webサイトの見た目)のことを示します。

前回は、画像にテキストを回り込ませたい!について解説しました。
レイアウトをする際で、パソコン(PC)の表示のときだけ、画像に対してテキストを回り込ませます。
タブレット端末、スマートフォン端末では、画像、テキストの流れにします。

下記の「画像にテキストを回り込ませたい!」に関する記事を理解してPart04にいきましょう。

画像にテキストを回り込ませたい!

レスポンシブデザイン、画像にテキストを回り込ませたい!

今回は、パソコン、スマートフォン端末では、違うレイアウトを適用させます。

テーブルを横スクロールさせるについて

テーブルを作成した際に、項目が多くタブレット端末、スマートフォン端末で確認した際に、見えにくい事を感じたことはありませんか。
今回は、タブレット端末、スマートフォン端末では、横スクロールをさせ可能な限り見やすいテーブル(表)を作成させます。
イメージ図は下記のようになります。

上記のイメージ図のように、パソコン(PC)は通常に表示され、タブレット端末、スマートフォン端末では、横スクロールが表示されます。
今回は、overflow-x scrollなど使うのでしっかり覚えておきましょう。
書き方は以下のようになります。

テーブル横スクロール

<div class="table-area">
	<table class="sp-table">
		<tbody>
			<tr>
				<th>Aコース</th>
				<td>Aコースはテキストが入ります。</td>
				<td>Aコースはテキストが入ります。</td>
				<td class="more-btn"><a href="#">詳細はこちら</a></td>
			</tr>
			<tr>
				<th>Bコース</th>
				<td>Bコースはテキストが入ります。</td>
				<td>Bコースはテキストが入ります。</td>
				<td class="more-btn"><a href="#">詳細はこちら</a></td>
			</tr>
      以下省略
		</tbody>
	</table>
</div>

/*--スマートフォン--*/
/*--メディアクエリの記述なし--*/
.table-area {
	width: 90%;
	margin: 0 auto;
	overflow-x: scroll;
}

table.sp-table {
	width: 100%;
	min-width: 900px;
	margin: 5em auto 2em;
}

/*--↓ 下記は装飾になります--*/
table.sp-table, 
table.sp-table td, 
table.sp-table th {
	border: 1px solid #595959;
	border-collapse: collapse;
}

table.sp-table td, 
table.sp-table th {
	font-size: .8rem;
	padding: 1em;
	box-sizing: border-box;
}

table.sp-table th {
	color: #333;
	background-color: #DEE1E6;
}

/*--↓ ボタン--*/
table.sp-table td.more-btn a {
	color: #fff;
	display: block;
	width: 100%;
	padding: 1em 0;
	text-align: center;
	background-color: #FD4E4F;
	border-radius: 30px;
}


/*--PC--*/
@media screen and (min-width: 1025px){
	.table-area {overflow-x: auto;}
	
	table.sp-table {width: 60%;}
}

通常時(タブレット端末、スマートフォン端末)は、overflow-x: scrollが適用されます。
1025ピクセル(PC)以上のときは、overflow-x: autoが適用され、スクロールがなくなります。

通常時(タブレット端末、スマートフォン端末)は、min-width(横幅)が適用されます。
「最少の幅」を指定するため、あまり小さい数値は指定しないようにしましょう。
目安としては、640以上にしましょう。

文字サイズ、文字色や幅(width)等は調整してください。
こちらにデモサイトを用意しました。
下記からご確認ください。