WordPressのGutenbergエディタで、テーブルに横スクロールを表示する方法を紹介します。
コードを2行追加するだけなので、簡単に試せます。
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;">最後に
よく使う機能は再利用ブロックにまとめておくと便利ですね。