2021年5月8日 / 最終更新日 : 2021年10月14日対馬俊彦 WordPress

クラシックブロックのテーブル(表)を横スクロールする方法

関連フォーラムトピック

列が多いテーブル(表)をクラシックブロックで作成すると、以下のように横にはみ出してしまいます。

テスト	100	テスト	100	テスト	100	テスト	100	テスト	100	テスト	100	テスト	100	テスト	100	テスト	100	テスト	100	テスト	100	テスト	100	テスト	100
テスト	200	テスト	200	テスト	200	テスト	200	テスト	200	テスト	200	テスト	200	テスト	200	テスト	200	テスト	200	テスト	200	テスト	200	テスト	200
テスト	300	テスト	300	テスト	300	テスト	300	テスト	300	テスト	300	テスト	300	テスト	300	テスト	300	テスト	300	テスト	300	テスト	300	テスト	300
テスト	400	テスト	400	テスト	400	テスト	400	テスト	400	テスト	400	テスト	400	テスト	400	テスト	400	テスト	400	テスト	400	テスト	400	テスト	400
テスト	500	テスト	500	テスト	500	テスト	500	テスト	500	テスト	500	テスト	500	テスト	500	テスト	500	テスト	500	テスト	500	テスト	500	テスト	500

このような場合は、横スクロールできるようにしましょう。そのやり方は以下の通りです。

グループブロックを作成する。
グループブロックの追加 CSS クラスに x-scroll と入力する。
表を入力したクラシックブロックをグループブロックの中に入れる。
以下の CSS を追加する。

div.x-scroll {
overflow-x: auto;
}
div.x-scroll table {
white-space: nowrap;
}

この結果、以下のように横スクロールできるようになります。

テスト	100	テスト	100	テスト	100	テスト	100	テスト	100	テスト	100	テスト	100	テスト	100	テスト	100	テスト	100	テスト	100	テスト	100	テスト	100
テスト	200	テスト	200	テスト	200	テスト	200	テスト	200	テスト	200	テスト	200	テスト	200	テスト	200	テスト	200	テスト	200	テスト	200	テスト	200
テスト	300	テスト	300	テスト	300	テスト	300	テスト	300	テスト	300	テスト	300	テスト	300	テスト	300	テスト	300	テスト	300	テスト	300	テスト	300
テスト	400	テスト	400	テスト	400	テスト	400	テスト	400	テスト	400	テスト	400	テスト	400	テスト	400	テスト	400	テスト	400	テスト	400	テスト	400
テスト	500	テスト	500	テスト	500	テスト	500	テスト	500	テスト	500	テスト	500	テスト	500	テスト	500	テスト	500	テスト	500	テスト	500	テスト	500

参考ブロックエディターのテーブルを横スクロールするには

テーブルブロックの追加 CSS クラスに x-scroll と入力して、以下の CSS を追加します。

figure.x-scroll {
overflow-x: auto;
}
figure.x-scroll table {
white-space: nowrap;
}

この結果、以下のように横スクロールできるようになります。

テスト	100	テスト	100	テスト	100	テスト	100	テスト	100	テスト	100	テスト	100	テスト	100	テスト	100	テスト	100	テスト	100	テスト	100	テスト	100
テスト	200	テスト	200	テスト	200	テスト	200	テスト	200	テスト	200	テスト	200	テスト	200	テスト	200	テスト	200	テスト	200	テスト	200	テスト	200
テスト	300	テスト	300	テスト	300	テスト	300	テスト	300	テスト	300	テスト	300	テスト	300	テスト	300	テスト	300	テスト	300	テスト	300	テスト	300
テスト	400	テスト	400	テスト	400	テスト	400	テスト	400	テスト	400	テスト	400	テスト	400	テスト	400	テスト	400	テスト	400	テスト	400	テスト	400
テスト	500	テスト	500	テスト	500	テスト	500	テスト	500	テスト	500	テスト	500	テスト	500	テスト	500	テスト	500	テスト	500	テスト	500	テスト	500

スマホで見る場合など、テーブルによっては横スクロールしない方が見やすいこともありますので、以下の記事に書いたやり方と使い分けるのがいいですね。

フレックスボックスを使ったテーブルのレスポンシブ対応

サイト運営者プロフィール

対馬俊彦魚沼情報サービス

【日本全国対応】WordPress のサイト制作、設定、カスタマイズ、トラブルでお悩み、お困りの方、お手伝いいたします。

Lightning / VK Blocks / VK Filter Search のサポート、カスタマイズを得意としています。

遠方からのご依頼の場合、打ち合わせ・サポートを Zoom や電子メール・電話などを併用して行わせていただきます。

オンラインレッスン形式でのホームページ制作サポートも行っています。お客様ご自身でホームページを制作・運用する上でうまくいかない部分をサポートいたします。設定やカスタマイズを手伝ってもらいたい、同時に便利な使い方や設定方法、カスタマイズのやり方も知ることができたら...という方にご好評いただいています。

デザイナー様、制作業者様のサイト制作のお手伝いも数多く行っています。難しい部分のコーディング ( PHP / CSS / jQuery ) をやってほしい、いま人手が足りない等、お仕事の依頼をお待ちしています。

ご要望をうかがった上で費用見積り（無料）を提示させていただきますので、お気軽にお問い合わせください。

≫メールでのお問い合わせはこちら