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

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

関連フォーラムトピック

テスト 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

参考:ブロックエディターで表を作れば横スクロールする

ブロックエディターで表を作れば、なにも設定しなくいても横スクロールしますし、編集画面でも横スクロールしてくれます。

テスト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