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

ハミングバードのテーブルをスマホで横スクロールできるようにするCSSの設定

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

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

目次

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

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

手順
  • スタイルシートに横スクロールさせるためのCSSを追加する
  • テーブルタグをクラス属性を指定した「divタグ」で囲む

CSS(クラス属性)の追加

ストークテーマでtableタグを横スクロールできるようにするカスタマイズ | OPENCAGEで紹介されているCSSをスタイルシートstyle.css及びカスタマイザーの「追加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タグでtableタグを囲みます。

<div class="tscroll">
<table>
<tbody>
<tr>
<th>見出しセル1</th>
<th>見出しセル2</th>
</tr>
<tr>
<td>データセル1</td>
<td>データセル2</td>
</tr>
</tbody>
</table>
</div>

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

最後に

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

ちなみに、これから有料テーマの購入を検討されているのであれば、このブログでも使用しているSWELLをおすすめします。今からハミングバードを購入するメリットは全くありません。

よかったらシェアしてね!

- シンプルなのに、高機能 -

swell_pr_banner

ブロックエディター完全対応のWordPressテーマ。
圧倒的な使い心地を追求し、SWELLは日々進化しています。

ブロックエディター完全対応のWordPressテーマ。

今日の一言

2023年11月3日にリリースされたコアアップデートが11月29日にロールアウトしました。長かっただけで特に大きな変化はありません。10月で大きく減ったアクセスは少し戻ったかな!?程度です(恐らく季節需要の高い記事のアクセスでそう見えるだけ)。とりあえずやる事は変わらないので、次のコアアップデートに向けてコツコツ記事を書いてリライトするだけです。

コメント

コメントする

目次