スマートフォン表示のときtableを横にスクロールさせる方法

2019.03.30

サイトやページで横長のtableをつかっているとき。PC表示時であればそれほど悩むことはないですが、スマホでの表示方法に悩むことがあります。きちんとデバイスの幅に合うよう組み方を変える方法もありますが、場合によっては肝心の表の見やすさが損なわれてしまうときもあると思います。かといって、対策を何もしないとページ全体からtableだけ突き抜けてしまって不格好な表示になってしまう・・・

そんなときに僕がよくつかうのが今回のCSS。スマホ表示のときにページからはみ出してしまうtableに対して横スクロールを付けるやり方です。

スクロールをつけない場合

HTML

例えばこういうHTMLがあるとします。

<table border="1" cellspacing="0" cellpadding="5">
	<tbody>
		<tr>
			<th>table header</th>
			<td>table data</td>
			<td>table data</td>
			<td>table data</td>
			<td>table data</td>
			<td>table data</td>
		</tr>
		<tr>
			<th>table header</th>
			<td>table data</td>
			<td>table data</td>
			<td>table data</td>
			<td>table data</td>
			<td>table data</td>
		</tr>
		<tr>
			<th>table header</th>
			<td>table data</td>
			<td>table data</td>
			<td>table data</td>
			<td>table data</td>
			<td>table data</td>
		</tr>
	</tbody>
</table>

CSS

CSSは下記のようにしておきます。

table{
	width:100%;
}
th{
	white-space: nowrap;
}
td{
	white-space: nowrap;
}

この場合、ブラウザではデモのようになると思います。開発者ツールなどでスマホ表示の状態にして見てみてください。tableの幅が100%になっているので、それに合わせてページ全体が縮小されてしまっています。

DEMO

スマホ表示のときスクロールをつける場合

HTML

tableを<div>で囲ってあげます。<div>のclass名はここでは仮にscrollとします。こんな感じです。

<div class="scroll">
	<table border="1" cellspacing="0" cellpadding="5">
		<tbody>
		<tr>
			<th>table header</th>
			<td>table data</td>
			<td>table data</td>
			<td>table data</td>
			<td>table data</td>
			<td>table data</td>
		</tr>
		<tr>
			<th>table header</th>
			<td>table data</td>
			<td>table data</td>
			<td>table data</td>
			<td>table data</td>
			<td>table data</td>
		</tr>
		<tr>
			<th>table header</th>
			<td>table data</td>
			<td>table data</td>
			<td>table data</td>
			<td>table data</td>
			<td>table data</td>
		</tr>
		</tbody>
	</table>
</div>

CSS

CSSは次のようにします。

table{
	width:100%;
}
th{
	white-space: nowrap;
}
td{
	white-space: nowrap;
}
.scroll{
	overflow: auto;
	white-space: nowrap;
}
.scroll::-webkit-scrollbar{
	 height: 5px;
}
.scroll::-webkit-scrollbar-track{
	 background: #F1F1F1;
}
.scroll::-webkit-scrollbar-thumb {
	 background: #BCBCBC;
}

スマホ表示の状態で見てみると、tableに横スクロールがついていると思います。ページもtableの幅に引っ張られることなく、きちんとした大きさで表示されています。

DEMO

tableの内容、組み方にもよると思いますが、このような見せ方も覚えておくと便利かも知れません。