Gutenbergでテーブルを横スクロールする方法

WordPressのGutenbergエディタで、テーブルに横スクロールを表示する方法を紹介します。

コードを2行追加するだけなので、簡単に試せます。


Gutenbergでテーブルを横スクロールする

コードを追加する

Gutenbergでテーブルを横スクロールするコード

HTMLの一番上と一番下に下記のコードを追加します。

<div style="overflow: auto;white-space: nowrap;">

</div>

コピーしました

表示例

このように表示されます。

テーブル テスト 横スクロール 試してみました 上下にコードを追加します TEST TEST TEST TEST

再利用ブロックで簡単にスクロールを挿入する

再利用ブロックに上記のコードを登録しておき、記事にその再利用ブロックを挿入後、通常のブロックへ変換して、表示するテーブルの内容を追記すると、簡単に横スクロールを実装できます。

再利用ブロックを追加する

  • 「カスタムHTML」ブロックを追加する
  • 上記ブロックに下記のコードを挿入する
<div style="overflow: auto;white-space: nowrap;">

</div>

  • 再利用ブロックとして保存する

再利用ブロックを利用する

  • 記事に上記の再利用ブロックを挿入する
  • 「通常のブロックへ変換」する
  • 下記のコードの下にテーブルを挿入する
<div style="overflow: auto;white-space: nowrap;">

最後に

よく使う機能は再利用ブロックにまとめておくと便利ですね。


関連記事

コメントを残す

*

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

error: Content is protected !!