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

テーブルがはみ出る問題

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

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

未対応テーマ  対応テーマ

未対応テーマの場合

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

  1. CSSを追加
  2. 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”>
<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です。

クラスも不要なTCDテーマ一覧

一部のテーマでは、テーブルを横スクロールさせるクラスの指定も不要になりました。

スマホではスクロールできるので、見え方を気にせずテーブルを作っていただけます。
対応テーマは以下の通りです。

初めから対応済みのテーマ

SHIPS(TCD098)より後にリリースされたTCDテーマすべて

アップデート後にクラスが不要になったテーマ

まとめ

スマホでテーブルを横スクロールさせる方法をご紹介いたしました。

横幅の小さなデバイスでもテーブルを綺麗に見せることができます。テーマの対応・未対応に限らず、少しの記述だけで対応できるので、ぜひ試してみてください。

その他のテーブルに関するHTMLコードは、下記記事にもまとめています。よろしければご覧ください。