モバイルサイズ時のWordPressサイトでテーブルを横スクロール表示する方法

WordPressサイトをスマホで見た時、テーブル（表）の右端がこのように切れてしまうことがあります。

テーブルがはみ出る問題

PCでは綺麗に見えていても、スマホでこのようにはみ出しているともったいないですよね。

当記事では、こういったテーブルを横スクロールできるようにする方法をご紹介いたします。WordPressテーマの対応の可否によって方法が異なりますので、下記よりご確認ください。

未対応テーマ　　対応テーマ

未対応テーマの場合

TCDテーマの場合、FALCON（TCD089）を含むそれより品番が若いテーマが未対応です。対象のテーマをお使いの場合は、以下の記述をそれぞれ追加いただくことで横スクロール可能です。

CSSを追加
divタグでテーブルを囲む

CSSを追加

まずは、スマホで見た際にスタイルを調整するための記述を追加します。右上のボタンからコピペしてご活用いただけます。下記例ではクラス名を「mobile_table」としていますが、任意のもので大丈夫です。

@media only screen and (max-width: 767px){
.post_content .mobile_table {
    overflow: auto;
    white-space: nowrap;
    margin-bottom: 24px;
}
}

TCDテーマの場合、ページごとの「カスタムCSS」にコピペするのがオススメです。テーマファイルの編集が不要で、アップデートしても削除される心配はありません。

divタグでテーブルを囲む

次に上記CSSを適用するために、横スクロールさせたいテーブルをdivタグで囲みます。で、そのdivタグに先ほどのクラスを下記のように指定すればOKです。

<div class="mobile_table">
<table style="width: 100%; border-collapse: collapse; background-color: #d1d1d1;" border="1">
<tbody>
<tr style="height: 35px;">
<td style="width: 33.3333%; height: 35px;">ライトプラン</td>
<td style="width: 33.3333%; height: 35px;">ベーシックプラン</td>
<td style="width: 33.3333%;">エキスパートプラン</td>
</tr>
<tr style="height: 35px;">
<td style="width: 33.3333%; height: 35px;">35,000円（税抜）</td>
<td style="width: 33.3333%; height: 35px;">50,000円（税抜）</td>
<td style="width: 33.3333%;">70,000円（税抜）</td>
</tr>
</tbody>
</table>
</div>

以下のテーブルをスマホで確認してみてください。上記記述を加えていますので、スマホでは横スクロールします。PCと同じ体裁で閲覧可能なわけです。

ライトプラン	ベーシックプラン	エキスパートプラン
35,000円（税抜）	50,000円（税抜）	70,000円（税抜）

対応テーマの場合

TCDテーマ「QUADRA」以降にリリースされたテーマでは、CSSを一部アップデートしています。下記のようにdivタグに「s_table」というクラスを指定するだけで横スクロール表示可能です。

※品番がTCD090以降のものがQUADRAより新しいテーマになります。

<div class="s_table">
<table style="width: 100%; border-collapse: collapse; background-color: #d1d1d1;" border="1">
<tbody>
<tr style="height: 35px;">
<td style="width: 33.3333%; height: 35px;">ライトプラン</td>
<td style="width: 33.3333%; height: 35px;">ベーシックプラン</td>
<td style="width: 33.3333%;">エキスパートプラン</td>
</tr>
<tr style="height: 35px;">
<td style="width: 33.3333%; height: 35px;">35,000円（税抜）</td>
<td style="width: 33.3333%; height: 35px;">50,000円（税抜）</td>
<td style="width: 33.3333%;">70,000円（税抜）</td>
</tr>
</tbody>
</table>
</div>

未対応テーマのようにCSSを個別に追加する必要はありません。テーブルを囲んだdivタグに「s_table」を指定するだけでOKです。