WordPressのテーブルをスマホで見やすくする

WordPressでテーブルを使った時、スマホで見難くて困った経験はありませんか？

ウェブサイトの情報を整理し、分かりやすく表示するために便利なテーブル（表）。WordPressでコンテンツを作成する際にも、データの比較や一覧表示などで重宝しますよね。しかし、せっかく時間をかけて作成したテーブルが、スマートフォンで見たときに崩れてしまったり、文字が小さすぎて読みにくくなったりして、困った経験はありませんか？

パソコンの大きな画面ではきれいに整列して見える表も、画面の小さなスマホでは横幅が足りずに、表示が途切れてしまったり、スクロールが面倒になったりすることがよくあります。これでは、訪問者がせっかくの情報を見逃してしまったり、ストレスを感じてサイトから離れてしまうかもしれません。

もし、あなたがこのような問題に直面したことがあるなら、それは決して珍しいことではありません。WordPressでテーブルをレスポンシブ対応させることは、多くのウェブサイト運営者が直面する課題の一つです。しかし、いくつか工夫をすることで、この問題は解決できます。

WordPressでBootstrap 5を使っている場合、テーブルをスマホでも見やすくするには レスポンシブ対応 が重要です。以下に、実用的な方法を整理して説明します。

✅ 方法1：table-responsive クラスで横スクロール対応

Bootstrap 5の標準的な方法です。

  

    

      

        
列1
        
列2
        
列3
      
    
    

      

        
データ1
        
データ2
        
データ3
      
      
    
  

解説：

• table-responsive を <table> の親に付けることで、小さい画面では横スクロールになります。
• Bootstrap 5では overflow-x: auto を自動で適用。

✅ 方法2：必要な画面サイズだけでレスポンシブ対応（例：table-responsive-sm）

画面サイズに応じて適用したい場合、以下のようにします：

  
    ...
  

ブレークポイント別：

• table-responsive-sm：576px以下でスクロール
• table-responsive-md：768px以下でスクロール
• table-responsive-lg：992px以下でスクロール
• table-responsive-xl：1200px以下でスクロール
• table-responsive-xxl：1400px以下でスクロール

✅ 方法3：CSSで列を折りたたみ表示（カスタム対応）

以下のようなCSSで「スマホでは1列ずつ表示」するスタイルも可能です（ただしテーブルではなくリスト風に変換）。

@media (max-width: 576px) {
  table thead {
    display: none;
  }
  table, table tbody, table tr, table td {
    display: block;
    width: 100%;
  }
  table tr {
    margin-bottom: 1rem;
    border: 1px solid #ddd;
    padding: 0.5rem;
  }
  table td::before {
    content: attr(data-label);
    font-weight: bold;
    display: block;
    margin-bottom: 0.5rem;
  }
}

PHP側で以下のように出力：

<td data-label="列名">データ</td>

✅ 方法4：テーブルをカード形式で出力（複雑なデータ向け）

スマホでは「テーブル風カード表示」に切り替えることで見やすくする方法もあります。データ件数が少ない・1件ごとの情報が多い場合に有効です。

✅ 補足：WordPress側での出力場所

• 固定ページや投稿で使うとき：カスタムテンプレートかショートコードでHTML出力
• プラグインや関数から生成する場合：echoするHTMLに table-responsive を含めるようにする

🔚 まとめ