ハミングバードのテーブルをスマホで横スクロールさせるCSSの設定

ハミングバードのテーブルタグは、スマホでも自動で最適化されます。

ですが、横のセルが多すぎたり、セル内のデータが長すぎると、スマホではテーブルが途中で見切れる又は改行されて見辛くなるので、横スクロール可能にして解決する方法を紹介します。

テーブルをスマホで横スクロールさせる

やることは2つだけです。

CSS（クラス属性）の追加

ストークテーマでtableタグを横スクロールできるようにするカスタマイズ | OPENCAGEで紹介されているCSSをそのまま使います。スタイルシート（style.css）に追加して下さい。

ただ、そのままでは複雑なテーブルで意図しない改行が入ることがあるので、僕は「white-space: nowrap;」を追加して折り返しを禁止しています（8行目はお好みで設定）。

@media only screen and (max-width: 480px) {
.tscroll table{
	width:100%;
	margin-bottom: .5em;
}
.tscroll{
	overflow: auto;
	white-space: nowrap;
	margin-bottom: 2em;
}
.tscroll::-webkit-scrollbar{
	height: 5px;
}
.tscroll::-webkit-scrollbar-track{
	background: #F1F1F1;
}
.tscroll::-webkit-scrollbar-thumb {
	background: #BCBCBC;
}
}

テーブルタグをdivタグで囲む

クラス属性を指定してdivタグでテーブルタグを囲みます。

見出しセル1
見出しセル2


データセル1
データセル2

これでスマホ表示の時は横スクロール可能なテーブルになります。

最後に

自動で最適化されるテーブルの方が見やすい時もあるので、全てのテーブルタグに今回の設定を使う必要はありません。スマホで見辛くなったテーブルに使うだけで十分です。

ただ、パソコン表示とスマホ表示の違いは、実際に覗いてみないと分かりません。少しめんどうかもしれませんが、記事を公開した後に一度スマホ表示も確認することをおすすめします。

Not found the post.