ハミングバードのテーブルタグは、スマホでも自動で最適化されます。
ですが、横のセルが多すぎたり、セル内のデータが長すぎると、スマホではテーブルが途中で見切れる又は改行されて見辛くなるので、横スクロール可能にする方法を紹介します。
目次
テーブルをスマホで横スクロールさせる
やることは2つだけです。
手順
- スタイルシートに横スクロールさせるためのCSSを追加する
- テーブルタグをクラス属性を指定した「divタグ」で囲む
CSS（クラス属性）の追加
ストークテーマでtableタグを横スクロールできるようにするカスタマイズ | OPENCAGEで紹介されているCSSをスタイルシートstyle.css及びカスタマイザーの「追加CSS」に追加します（ハミングバードでも使える）。
ただ、そのままでは複雑なテーブルで意図しない改行が入るので、僕はwhite-space: nowrap;を追加して折り返しを禁止しています。8行目はお好みで設定して下さい。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
@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タグでtableタグを囲みます。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<div class="tscroll"> <table> <tr> <th>見出しセル1</th> <th>見出しセル2</th> </tr> <tr> <td>データセル1</td> <td>データセル2</td> </tr> </table> </div> |
これでスマホ表示の時は横スクロール可能なテーブルになります。
最後に
自動で最適化されるテーブルの方が見やすい時もあるので、全てのテーブルタグに今回の設定を使う必要はありません。スマホで見辛くなったテーブルに使うだけで十分です。
ただ、パソコン表示とスマホ表示の違いは、実際に確認してみないと分かりません。少しめんどうかもしれませんが、記事を公開した後に一度スマホ表示も確認することをおすすめします。
コメント