SWELLの表がスマホで横スクロールしない｜表示条件・表の幅・配置の確認順

2026年9月16日

SWELLで横スクロールを設定したのに、スマホでは表が動かず、右端の内容を読めない。編集画面では全体が見えているため、どこを直せばよいのか迷うことがあります。

確認するのは、スクロールさせる表示対象・表の幅・表全体の配置の3つです。ただし、すべての列が画面内に収まっている表は、横に動かなくても正常です。この記事では、変更が必要な状態を見分けてから、設定を確認する順番を説明します。

対象は、SWELLを使ったWordPressの標準「テーブル」ブロックです。カスタムHTMLや別の表作成プラグインでは、設定の場所や動作が異なります。

表がすべて読めるなら、横に動かなくても正常です

横スクロールで移動できるのは、表の幅が、本文中で表を表示できる横幅より広いときです。横スクロールを有効にしても、必ず横へ動くわけではありません。

スマホで最後の列まで見えていて、文字も無理なく読めるなら、そこで確認を終えて大丈夫です。右端が隠れて読めない場合に、次の設定を確認しましょう。

下の図では、枠の内側が画面に見えている範囲です。表が収まっている場合と、右側が隠れている場合を分けて考えます。

記事の編集画面で、困っている表のセルをクリックします。右側の設定サイドバーで「ブロック」を選び、「横スクロール設定」を開いてください。サイドバーが見えない場合は、画面右上の「設定」ボタンで表示できます。

スマホだけで横スクロールさせるなら「横スクロール可能（SPのみ）」を選びます。SPはスマートフォン側の表示条件を指します。スマホとPCの両方を対象にするなら「SP&PC」です。

次の画面では、表示対象を「SPのみ」、表の横幅を「600px」にしています。幅の考え方は次の章で説明します。

「対象」は横スクロールを許可するという意味です。実際に横へ移動する余地があるかどうかは、表の幅によって変わります。

設定を保存し、スマホに近い横幅で確認します。PCでは、画面右上の「表示」→「モバイル」で、編集画面の幅を切り替えられます。

実際の記事表示は、「表示」→「新しいタブでプレビュー」で開き、ブラウザーの横幅を狭めて確認します。以降、この確認を「スマホ幅のプレビュー」と呼びます。

「SPのみ」を選んだ表は、スマホ幅で確認してください。右端まで読めるようになれば、以降の変更は不要です。

ブロックの選び方や設定サイドバーの操作に迷う場合は、SWELLのブロックエディターの基本操作も参考にしてください。

表示対象が合っているのに文字が窮屈な場合は、同じ「横スクロール設定」にある「テーブル全体の横幅」を確認します。ここは表全体の幅を決める欄です。

たとえば単位が「%」で値が「100」なら、表は本文で表示できる横幅に合わせて収まることがあります。横へ移動する余地がないため、スクロールを有効にしていても動きません。

原因を確かめるために、単位を「px」にして、幅に「600」を入れてみます。pxは画面上の長さを指定する単位です。これは確認用の一例なので、今の値を控えてから変更してください。

保存後にスマホ幅のプレビューを開き、表の中を横へ移動できるか確かめます。PCでは、表の下の横スクロールバーなどで確認できます。右側の列まで読めれば、横スクロールは働いています。文字が詰まりすぎない範囲で幅を調整しましょう。

HOAI Point

600pxは確認用の一例です。すべての表に合う幅ではありません。幅を広げすぎると、隣の列と見比べるための移動が増えます。文字の読みやすさと比較のしやすさを見ながら決めましょう。

下の表は、表示対象を「SPのみ」、幅を600px、表全体の配置を「なし」にした例です。スマホでは表の中を横に動かして「プランB」を確認できます。PCで全列が収まっている場合は、横移動は不要です。

スクロールできます

SWELLの横スクロールと幅指定の機能は、公式のテーブルブロック解説でも紹介されています。

スマホが対象になっていて、幅も指定しているのに右端が読めない場合は、表ブロック全体の配置を確認します。

表を選択し、表の上に出るツールバーの「配置」を開きます。「左寄せ」「中央揃え」などが選ばれていたら、元の設定を控えたうえで「なし」に戻してください。

下の画像では、左のボタンが表全体の配置、右のボタンが列内の文字揃えです。

この操作と、隣の「カラムの配置を変更」は別です。カラムは表の列のこと。「カラムの配置を変更」は列内の文字を左・中央・右へそろえる操作なので、文字の中央揃えまで解除する必要はありません。

今回の確認環境では、同じ表を「左寄せ」「中央揃え」にすると表全体が右にはみ出し、表の中だけを横に動かせない状態になりました。「なし」に戻すと、本文の横幅に収まった枠の中で表を横に動かせました。すべてのサイトで配置が原因になるという意味ではなく、ここまでの設定で解決しない場合の確認箇所です。

SWELL公式フォーラムの開発者回答にも、表の左寄せを解除するよう案内された事例があります（2022年の相談）。

変更を保存し、再びスマホ幅のプレビューで確認します。最後の列まで読める状態になったら、そこで設定の変更を止めましょう。

編集画面の見た目だけで終わらせず、保存した記事のプレビューで、次の条件を確認します。未公開記事を実機のスマホで確認する場合は、同じWordPressサイトへログインした状態でプレビューを開いてください。

幅600pxの例をスマホで見るときは、表の上に指を置き、左へスワイプすると、右側に隠れていた「プランB」の見出しと内容を確認できます。