cssでスマホ表示のときにtableのth部分を固定してtd部分をスクロールさせる

当ページのリンクには広告が含まれています。

ブログなどでtable(表)を使う時、スマホでの表示をどうしようかというのは悩むポイントです。スクロールさせたり行をすべて縦積みにしてしまったりといくつかの方法があります。

縦積みのtableは他の人が使ってるのを見て、個人的にはあまり好みじゃないなと思っていました。ただ、実際にやっている中で縦積みとスクロールを合わせたものがなんとか作れましたので紹介します。

INDEX

基本のtableから縦積みにしてみる

まずはいわゆる縦積みというのをやってみました。基本となるtableは単純なものです。

OSAndroid 8.0 Oreo/EMUI 8.0Android 7.0 Nougat
CPUHUAWEI Kirin 659 オクタコアCPU (4 × 2.36GHz + 4 × 1.7GHz)MediaTek MT6750T (オクタコアCPU)
RAM3GB4GB
ストレージ32GB32GB
ディスプレイ5.65インチ 2160×1080 (FHD+)5.7インチ 2160×1080 (FHD+)
<table class="side-table">
<tbody>
<tr>
	<th>OS</th>
	<td>Android 8.0 Oreo/EMUI 8.0</td>
	<td>Android 7.0 Nougat</td>
</tr>
<tr>
	<th>CPU</th>
	<td>HUAWEI Kirin 659 オクタコアCPU (4 × 2.36GHz + 4 × 1.7GHz)</td>
	<td>MediaTek MT6750T (オクタコアCPU) </td>
</tr>
<tr>
	<th>RAM</th>
	<td>3GB</td>
	<td>4GB</td>
</tr>
<tr>
	<th>ストレージ</th>
	<td>32GB</td>
	<td>32GB</td>
</tr>
<tr>
	<th>ディスプレイ</th>
	<td>5.65インチ 2160×1080 (FHD+)</td>
	<td>5.7インチ 2160×1080 (FHD+)</td>
</tr>
</tbody>
</table>

これを縦積みにするには、thやtdにdisplay:blockしてしまえばOKです。(わかりやすいようにthに背景つけました)

OSAndroid 8.0 Oreo/EMUI 8.0Android 7.0 Nougat
CPUHUAWEI Kirin 659 オクタコアCPU (4 × 2.36GHz + 4 × 1.7GHz)MediaTek MT6750T (オクタコアCPU)
RAM3GB4GB
ストレージ32GB32GB
ディスプレイ5.65インチ 2160×1080 (FHD+)5.7インチ 2160×1080 (FHD+)
.side-table1 tbody th{
	display:block;
	width:100%;
	background:#f0f0f0;
}
.side-table1 tbody td{
	display:block;
	width:100%;
}

ただ、これだと全部が横幅100%取ってしまうのでなんとなくもったいない気もしますし、理解はできるけど一覧性はないよなぁ…と。

そこでちょっと改良版。

td部分は横並びにしてみる(スクロールなし)

Huawei nova lite 2ZenFone Max Plus (M1)
OSAndroid 8.0 Oreo/EMUI 8.0Android 7.0 Nougat
CPUHUAWEI Kirin 659 オクタコアCPU (4 × 2.36GHz + 4 × 1.7GHz)MediaTek MT6750T (オクタコアCPU)
RAM3GB4GB
ストレージ32GB32GB
ディスプレイ5.65インチ 2160×1080 (FHD+)5.7インチ 2160×1080 (FHD+)
.side-table2 tr{
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	width:100%;
}
.side-table2 thead th:nth-of-type(1){
	display:none;
}
.side-table2 thead th, .side-table2 td{
	flex:1 1 auto;
	width:50%;
	text-align:center;
}
.side-table2 tbody th{
	width:100%;
	background:#f0f0f0;
}
.side-table2 th, .side-table2 td{
	border:0;
}
.side-table2 tbody td{
	padding:.5em;
}
.side-table2 th, .side-table2 td{
	font-size:90%;
}

ただ、これは左端の部分がなくなっただけなので、2,3列のものにしか向いてません。

td部分はスクロールするようにする

td部分は横並びになっていて、それがスクロールするようにしてみました。スマホか横幅640px以下で見てみてください。

Huawei nova lite 2ZenFone Max Plus (M1)ZenFone Max Plus (M1)
OSAndroid 8.0 Oreo/EMUI 8.0Android 7.0 NougatAndroid 7.0 Nougat
CPUHUAWEI Kirin 659 オクタコアCPU (4 × 2.36GHz + 4 × 1.7GHz)MediaTek MT6750T (オクタコアCPU) MediaTek MT6750T (オクタコアCPU)
RAM3GB4GB4GB
ストレージ32GB32GB32GB
ディスプレイ5.65インチ 2160×1080 (FHD+)5.7インチ 2160×1080 (FHD+)5.7インチ 2160×1080 (FHD+)
@media screen and (max-width: 640px){
.side-scroll{
	overflow-x:auto;
	margin:1.5rem auto;
	word-break:break-all;
	width:100%;
	padding-bottom:8px;
}
.side-table3{
	text-align:center;
	font-size:90%;
}
.side-table3 td, .side-table3 th{
	border:0;
}
.side-table3 tr{
	display:flex;
}
.side-table3 thead th{
	width:calc(50vw - 1.5rem);
	max-width:200px;
	padding:.5rem;
}
.side-table3 tbody th{
	width:100%;
	position:absolute;
	left:0;
	text-align:center;
	line-height:1.5rem;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
	background:#eee;
	padding:0 0 0 0;
}
.side-table3 tbody td{
	width:calc(50vw - 1.5rem);
	padding:1.8rem .5rem .5rem .5rem;
}
.side-table3 thead th:nth-of-type(1){
	display:none;
}
}

改良の余地はまだまだありますし、とりあえず試しで作ったのでソースが汚いですね…。使うサイトに合わせて余白なり何なりを調整すれば、なんとか使えるのではないでしょうか。

このままだと横2列分が1画面に表示されるのですが、そのままだとスクロールできることに気づかれない恐れもあります。少し横幅を小さくして3列目をはみ出させるか、ScrollHintを使ってスクロールできることを明示するか、なにか工夫がほしいですね。

私もメインサイトでこれを使うために、ちょっとtableのスタイルをいろいろ整理したいと思います(汗

シェアしてね!

この記事を書いた人

静岡県静岡市清水区在住のウェブサイト運営者。ネット上ではc-miya、orefolderなどの名前で活動しています。

ストレスに弱いので、できるだけ好きなことだけをして生きたいと思いながら生活しています。「楽しい」が優先順位の一番上に来るようにしたいですね。

INDEX