2021年5月8日 / 最終更新日 : 2024年8月9日 対馬 俊彦 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 ) をやってほしい、いま人手が足りない等、お仕事の依頼をお待ちしています。

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

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

Lightning テーマ使用

中小企業様、個人事業主様向け

最適なホームページ

を制作いたします

制作費用クオリティを落とさずに



価格を抑えたサイトを制作します
必要十分お問い合わせフォーム、新着情報など



必要なものが最初から揃っています
サポート1年間のサポートがついて安心
初めてでもホームページを活用できます
もっと詳しく
カテゴリー
WordPress
その他

前の記事

VK Block Patterns 1.1.0 の新機能
2021年5月5日
Lightning Pro

次の記事

メニュー項目が多い場合の対処法：overflow-y: auto; でスクロール
2021年5月19日