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

【SWELL】テーブルをスマホ表示で整えるCSSサンプル（1列表示の最適化）

SWELL
SWELL

SWELLのテーブルブロックで「スマホで縦並びにする」をONにした際、PC側の「横幅設定」が残ってしまい、表示が崩れてしまったことはありませんか？

今回は、PCでは2列・スマホでは綺麗な1列（100%幅）に整えるためのCSSサンプルをご紹介します。

目次

現象：スマホで縦並びにすると幅が中途半端になる

SWELLのテーブル設定で以下の2つを同時に行うと、スマホ表示が少し不自然になります。

  • 「テーブル1列目の横幅」を固定（例：200px）に設定
  • 「スマホで縦並びに表示する」をON

この場合、スマホで縦に並んでも「200px」という固定幅が生きてしまうため、画面幅いっぱいに広がらず、中途半端な余白ができてしまいます。

職種フィットネストレーナー
勤務地愛知県名古屋市中区○○町1-2-3
雇用形態業務委託
給与3,500円〜 / 時間
応募資格トレーニング指導経験者歓迎

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

CSSはどこに書けばいい？

紹介するコードは、以下のいずれかに貼り付けてください。

  • サイト全体に適用する場合
    「外観」＞「カスタマイズ」＞「追加CSS」
  • その記事だけで使う場合
    投稿編集画面の下部にある「カスタムCSS用高度な設定」のCSS入力欄

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

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

テーブルの「高度な設定」内の追加CSSクラスに table-sp-full と入力して使用してください。

CSSサンプル

@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%」のようにバランスを調整したい場合は、以下のコードが有効です。

下の「まとめ」のテーブルの設定はこちら

  • 表のセル幅を固定：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 に変えてください。

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

どちらのパターンでも、共通して言えるのは「メディアクエリでスマホサイズ以下の時だけ、!importantで横幅指定を上書きする」という点です。

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

これで、求人情報や会社概要などのテーブルがスマホでも読みやすくなります。ぜひ活用してみてください。

SWELL

関連記事

目次