MENU
無料相談はこちらから
無料相談はこちらから

【SWELL】テーブルの「スマホ縦並び」で横幅が崩れる原因と解決CSS

SWELL
SWELL

SWELLのテーブルブロックにある便利な機能「スマホで縦並びにする」。

PC用に「1列目の幅」を固定設定していると、スマホで縦並びにした際に中途半端な隙間ができて表示が崩れることがあります。

これは、PC用の固定幅設定がスマホ時にも優先されてしまうことが原因です。
本記事では、CSSを使ってスマホ時だけ幅100%にリセットし、違和感のない1列表示にする方法を解説します。

目次

なぜ崩れるのか？

  • 原因
    SWELLの幅指定はHTMLに直接書き込まれる（インラインスタイル）ため、通常のCSSより優先度が強い。
  • 結果
    縦並びにしても、指定した「200px」などの幅が維持され、画面右側に空白が残る。
職種フィットネストレーナー
勤務地愛知県名古屋市中区○○町1-2-3
雇用形態業務委託
給与3,500円〜 / 時間
応募資格トレーニング指導経験者歓迎

これを解消するために、「スマホ時のみ幅指定を解除するCSS」を適用します。

パターン1：標準的なテーブル（td）の場合

1列目をth（見出し）にせず、通常のセルとして運用している場合のコードです。

設定手順：

  • テーブルブロックの右メニュー「高度な設定」を開く
  • 「追加CSSクラス」に table-sp-full と入力する
  • カスタムCSSや子テーマのstyle.cssに以下のサンプルCSSを追記

サンプルCSS：

/* スマホ縦並び時に幅を100%に広げる */
@media (max-width: 960px) {
    .table-sp-full td {
        width: 100% !important;
        max-width: 100% !important;
    }
}
職種フィットネストレーナー
勤務地愛知県名古屋市中区○○町1-2-3
雇用形態業務委託
給与3,500円〜 / 時間
応募資格トレーニング指導経験者歓迎

パターン2：1列目を「th」にしている場合

SWELLの機能で「tbodyの1列目をthに変換する」をONにしている場合は、CSSのターゲットを th に変更する必要があります。

設定内容：

  • 「tbody の1列目を th に変換する」：ON
  • 追加CSSクラス：table-sp-full

CSSサンプル：

@media (max-width: 960px) {
    .table-sp-full th {
        width: 100% !important;
        max-width: 100% !important;
    }
}
職種フィットネストレーナー
勤務地愛知県名古屋市中区○○町1-2-3
雇用形態業務委託
給与3,500円〜 / 時間
応募資格トレーニング指導経験者歓迎

SWELLのテーブル幅指定はHTMLに直接書き込まれる（インラインスタイル）ため、通常のCSSよりも優先順位が高いです。そのため、CSS側で強引に上書きするために !important を使用しています。

応用編：スマホでも横並び（比率維持）にしたい場合

1列にせず、スマホでも「左30%：右70%」のようにバランスを調整したい場合の設定例とCSSサンプルです。

設定内容：

  • 表のセル幅を固定：ON
  • ヘッダーセクション：ON
  • テーブル1列目の横幅：200px
  • スマホで縦並びに表示する：OFF

CSSサンプル：

@media (max-width: 960px) {
    .table-sp-width td:first-child {
        width: 30% !important;
        max-width: 30% !important;
    }
}

コンテンツの内容に合わせて % の数値を調整してみてください。もし「1列目をthにする」設定にしている場合は、ここも th に変えてください。

まとめ：使い分けのポイント

項目設定方法
適用範囲画面幅 960px 以下（SWELLの標準ブレイクポイント）
指定クラスtable-sp-full（任意の名前に変更可）
ポイント!important をつけることでインラインスタイルを上書き

これで、PCでもスマホでも読みやすいテーブル表示ができます。ぜひ活用してみてください。

SWELL

関連記事

目次