スマホで横スクロール可能なテーブルを設置する

通常、テーブル(table)はコンテンツエリアいっぱいの幅で表示されますが、列数などが多い場合は横幅が足りず潰れてしまうことがあります。そんなとき、テーブルを横スクロールするようにすることができます。

ただし、これは HTML でテーブルを書く必要があります。テーブルブロックでは使用できません。

カスタマイズ方法

HTML

HTML ブロックに、次のように .c-responsive-table で囲ったテーブルを書いてください。

<div class="c-responsive-table">
  <table>
    〜
  </table>
</div>
カラム1 カラム2 カラム3 カラム4 カラム5 カラム6
カラム1 カラム2 カラム3 カラム4 カラム5 カラム6
カラム1 カラム2 カラム3 カラム4 カラム5 カラム6

この記事を書いた人

キタジマ タカシ

長崎県長崎市在住。地元のWeb制作会社でWebデザイナー/エンジニアとして従事した後、2015年にフリーランス [ モンキーレンチ ] として独立。WordPress のテーマやプラグイン、ライブラリ、CSS フレームワーク等、多数のプロダクトをオープンソースで開発・公開しています。

Snow Monkey オンラインコミュニティ

Snow Monkey をより良いテーマにするために、今後の機能開発等について情報共有したりディスカッションをしたりする場所です。より多くのユーザーの交流があったほうがより良いプロダクトに育っていくと思いますので、ぜひご参加ください!