SWELLで作ったテーブルに縦スクロールバーが表示されてしまったときの対処方法

WordPressテーマ「SWELL」でテーブルを作成したときに、テーブルの右端に縦スクロールバーが表示されてしまうことがあります。
縦スクロールバーを表示する設定をしているわけではありません。
本来、縦スクロールバーを必要としていない表組みで、表示されると邪魔ですよね？
見た目にもよくありません。

実は、このサイトでも、実際にこの現象が発生しました。

本来は左側の表にしたいのに、なぜか右側のように不要な縦スクロールバーが表示されてしまいます。
テーブル自体は普通に表示されています。
縦方向に内容がはみ出しているようにも見えません。
ところが、テーブルの右端に、なぜか縦スクロールバーが表示されてしまいます。

外枠に高さを指定していて、テーブルがその高さをはみ出しているのなら縦スクロールバーが表示されていてもおかしくはありません。
ですが、外枠を作っているわけでもなく、高さを指定しているわけでもないのにこのように縦スクロールバーが表示されてしまいます。

この「縦スクロールバー表示問題」、解決する方法を順を追ってご説明します。

なお、この記事は、「WordPress： 7.1 / SWELL： 2.19.0」の構成をもとに書いています。
バージョンが異なると、違う動作になる場合もあり得ます。
あらかじめ、ご承知おきください。

SWELLのテーブルで縦のスクロールバーが表示される原因は？

調べてみると、SWELLのテーブルブロックへキャプションを追加すると右側に縦スクロールバーが表示される現象が起きる場合があるようです。
このサイトでも確かにキャプションを追加していました。

キャプションとは、テーブルの下に付ける説明文のことです。
なぜ、キャプションを追加すると縦スクロールバーが表示されるのでしょうか？
くわしく原因をみていきます。

WordPressのテーブルブロックは、HTML上ではおおむね次のような構造になります。

<figure class="wp-block-table">
    <table>
        ・・・
    </table>
    <figcaption>キャプション</figcaption>
</figure>

WordPressのテーブルブロックでは、横に長い表をスクロールできるように、外側の .wp-block-table に overflow-x: auto; が付加されます。

overflow-x: auto; は、横方向にはみ出した内容をどのように扱うかを指定するプロパティです。
ただし、CSSの仕様では、横方向の overflow に auto などが指定されている場合、指定されていない縦方向の overflow も実質的に auto として扱われます。

そのため、WordPressでは横スクロールのために設定された overflow-x: auto; によって、縦方向についてもスクロールバーが表示される可能性がある状態になります。

また、キャプションを付けると、テーブルの下に figcaption という要素が追加されます。
そして、SWELLが、figcaption に以下のような指定を加えています。

.wp-block-table figcaption {
    display: block !important;
    line-height: 1.4;
    margin-top: .75em;
}

これは、推測になりますが、SWELLが追加した display: block !important; line-height: 1.4; margin-top: .75em; これらの高さや余白に関わる指定が影響している可能性も考えられます。

その結果、キャプションの余白や高さなどが影響し、ブラウザが縦方向にはみ出している領域があると判断して、縦スクロールバーを表示するのではないでしょうか。

ただ、同じページにテーブル（表組み）がいくつもある場合、縦スクロールバーが表示されるテーブルと、表示されないテーブルが混在するという現象もこのサイトで確認しています。

ですので、一概にWordPressの仕様の問題、SWELLの仕様の問題というだけではなく、使用しているテーマとの「組み合わせ問題」があるのかもしれません。

次に、この問題を解決する方法を述べていきます。

テーブルのキャプションを削除して解決する

一番簡単な方法は、テーブルのキャプションを削除してしまうことです。
その上で、テーブルに対する説明文を付けたい場合は、

• テーブルの下に段落を追加。
• その段落に、「追加CSSクラス」を設定。
• CSSで文字の色や大きさを設定する。

このようにすれば、同じような見た目にすることができます。

つづけて、これ以外の別の方法も紹介します。

WordPress のテーブルブロックをカスタマイズして解決する

他のページでもテーブルを使っている場合、キャプションに「追加CSSクラス」を設定するのではなく「意図しない縦スクロールバーが表示されないように一括で設定したい」と、思うかもしれません。
その場合の設定方法をご説明します。

以下の指定を子テーマのCSSに追加します。

.wp-block-table {
    overflow-y: hidden !important;
}

WordPressのテーブルブロック自体に、縦のスクロールバーを非表示にする指定を加えます。
この設定であれば、サイト全体に効きます。

特定のページだけWordPress のテーブルブロックをカスタマイズして解決する

サイト全体ではなくて、特定の記事だけ、特定のページだけ「意図しない縦スクロールバーが表示されないように設定したい」という場合は以下のように設定します。

【投稿記事の場合】

#body_wrap.postid-（記事ID） .wp-block-table {
    overflow-y: hidden !important;
}

（記事ID）のところには、設定する記事のIDを記述してください。

【固定ページの場合】

#body_wrap.page-id-（ページID） .wp-block-table {
    overflow-y: hidden !important;
}

（ページID）のところには、設定するページのIDを記述してください。
1ページに複数のテーブルがある場合はこちらの方が簡単だと思います。
上の項目で説明したようにサイト全体に設定した場合、他のページで意図したとおりの表示にならなくて混乱するような可能性も考えられます。
例えば、

• 複数人でWordPressサイトを管理していて、設定した担当者しか知らなかった。
• 設定した担当者から新しい担当者に替わって、「テーブルの縦スクロールバーを非表示に設定した」ことを引き継ぎできていなかった場合など。

そんなトラブルが起きないように、該当ページにだけ効くように設定する方が無難な場合があります。

テーブルの縦スクロールバーが意図せず表示された場合の解決方法をご紹介しました。
状況に応じて設定方法を使い分けしてみてください。

あわせてこちらの記事も読まれています。