Web反響ラボ

  • 投稿日

【レスポンシブ対応】CSSで作るtableレイアウト｜HTMLコードと実装解説

【レスポンシブ対応】CSSで作るtableレイアウト｜HTMLコードと実装解説

Webサイト制作において、会社概要や料金表、スペック比較などで欠かせない「テーブル（表）」。しかし、画面幅の狭いスマートフォンでは、PCと同じレイアウトで表示すると、文字が読みづらかったり、表示が崩れやすく、ユーザーにストレスを与えてしまいがちです。

Googleのモバイルファーストインデックス（MFI）が主流の現代において、「スマホで見やすい表」を作ることはSEO対策としても非常に重要です。

本記事では、JavaScriptを使わずCSSだけで実装できるレスポンシブなtableの手法5選を紹介します。

デモを見る

目次　- Index -

10597文字

読み終わる時間の目安：約18分

なぜtableのレスポンシブ化が必要なのか？

PC向けに作られた大きな表をそのままスマホで表示すると、文字が小さくなったり、画面からはみ出したりしてしまいます。これは「モバイルフレンドリー」ではないと判断され、検索順位に悪影響を及ぼす可能性があります。

適切なレスポンシブ対応を行うことで、以下のメリットが得られます。

  • 離脱率の低下： ストレスなく情報を読み取れる。
  • UX（ユーザー体験）の向上： 必要な情報を素早く見つけられる。
  • SEO評価の向上： モバイルでの閲覧性が確保される。

縦並びになるレスポンシブ対応のtable

最も基本的かつ汎用性が高いのが、スマホ表示時に各セルを「縦並び」にする方法です。

通常、table要素はブラウザのデフォルト設定で display: table; となっていますが、これをメディアクエリで display: block; に上書きすることで、1列のカード型レイアウトのように変化させることができます。

活用シーン会社概要、お問い合わせフォームなど
メリット画面幅いっぱいに文字が表示されるため、読みやすい
<table class="table-css01">
  <tr>
    <th>会社名</th>
    <td>サンゼンデザイン株式会社</td>
  </tr>
  <tr>
    <th>設立</th>
    <td>2018年1月5日</td>
  </tr>
  <tr>
    <th>代表取締役</th>
    <td>土井　達郎</td>
  </tr>
  <tr>
    <th>所在地</th>
    <td>〒802-0973<br>
      福岡県北九州市小倉南区星和台2丁目2-36-2</td>
  </tr>
  <tr>
    <th>電話番号</th>
    <td>093-982-4223</td>
  </tr>
  <tr>
    <th>事業内容</th>
    <td>
      <ul>
        <li>ホームページのデザイン・制作</li>
        <li>運営サポート・コンサルティング</li>
        <li>検索エンジン上位表示対策（SEO対策）</li>
        <li>ランディングページ提案・制作（LPO対策）</li>
        <li>Web広告出稿代行・管理</li>
        <li>Googleマップ上位表示対策（MEO対策）</li>
      </ul>
    </td>
  </tr>
</table>
@media screen and (max-width: 640px) {
  .table-css01 th, .table-css01 td {
    display: block;
    border-bottom: none;
  }
  .table-css01 tr:last-child td:last-child  {
    border-bottom: 1px solid #ccc;
  }
}

見出しを疑似要素で補うレスポンシブ対応のtable

単に縦並びにするだけでは、「そのデータが何を意味するのか」が分からなくなってしまうテーブルもあります。そこで、CSSの疑似要素 ::before を使って、スマホ時のみ見出しを表示させる方法が有効です。

活用シーン縦並び型にする際、どのデータがどの項目か分かりづらくなる場合
メリットHTMLの構造を変えずにCSSだけで見た目を制御でき、保守性に優れている
<table class="table-css02">
  <thead>
    <tr>
      <th>サイト規模</th>
      <th>ページ数</th>
      <th>制作費用</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>最小規模サイト</td>
      <td>5ページ</td>
      <td>約<span class="en">30</span>万円</td>
    </tr>
    <tr>
      <td>一般規模サイト</td>
      <td>10ページ</td>
      <td>約<span class="en">45</span>万円</td>
    </tr>
    <tr>
      <td>中規模サイト</td>
      <td>30ページ</td>
      <td>約<span class="en">80</span>万円</td>
    </tr>
    <tr>
      <td>大規模サイト</td>
      <td>100ページ</td>
      <td>約<span class="en">200</span>万円</td>
    </tr>
  </tbody>
</table>
@media screen and (max-width: 640px) {
  .table-css02 th, .table-css02 td {
    display: block;
    border-bottom: none;
  }
  .table-css02 tr:last-child td:last-child  {
    border-bottom: 1px solid #ccc;
  }
  .table-css02 thead {
    display: none;
  }
  .table-css02 td:first-child, .table-css03 td:first-child {
    background: #241a08;
    color: #fff;
    font-weight: 500;
  }
  .table-css02 td:nth-child(2)::before {
    content: "【ページ数】";
  }
  .table-css02 td:nth-child(3)::before {
    content: "【制作費用】";
  }
}

data属性で見出しを表現するレスポンシブ対応のtable

先程の疑似要素で見出しを表示する方法だと、「CSSに直接テキストを書くのは効率が悪い」という場合に最適なのが、data属性（カスタムデータ属性）を活用するのが便利です。

この方法は、SEO的な観点からもHTML構造を汚すことなく、動的なコンテンツ生成とも相性が良いため、現在の主流となっています。

活用シーンラベルと内容を確実に読ませたい場合
メリットどの項目に対するデータか常に明示されるため、ユーザーを迷わせない
<table class="table-css03">
  <thead>
    <tr>
      <th>プラン名</th>
      <th>月額料金</th>
      <th>サポート</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>エントリープラン</td>
      <td data-label="月額料金"><span class="en">&yen;500</span>/月</td>
      <td data-label="サポート">サポートなし</td>
    </tr>
    <tr>
      <td>スタンダードプラン</td>
      <td data-label="月額料金"><span class="en">&yen;5,000</span>/月</td>
      <td data-label="サポート">メールサポート</td>
    </tr>
    <tr>
      <td>ビジネスプラン</td>
      <td data-label="月額料金"><span class="en">&yen;15,000</span>/月</td>
      <td data-label="サポート">24時間サポート</td>
    </tr>
  </tbody>
</table>
@media screen and (max-width: 640px) {
  .table-css03 thead {
    display: none;
  }
  .table-css03 th, .table-css03 td {
    display: block;
    border-bottom: none;
  }
  .table-css03 tr:last-child td:last-child  {
    border-bottom: 1px solid #ccc;
  }
  .table-css03 td:not(:first-child) {
    text-align: right;
  }
  .table-css03 td::before {
    content: attr(data-label);
    font-weight: bold;
    float: left;
    margin-right: 1em;
  }
}

スクロールして表示させるレスポンシブ対応のtable

比較表やスペック表など、列を崩すと内容が分かりづらくなる複雑なデータに最適な方法です。親要素に overflow-x: auto; を指定するだけで、表の構造（データの相関関係）を維持したまま横スワイプで閲覧させることが可能です。

活用シーン項目数が多い料金表、比較表、スペック表など
メリット 表の構造が崩れず、データの比較がしやすい
<div class="table-scroll">
 <table class="table-css04">
    <thead>
      <tr>
        <th></th>
        <th>プランA</th>
        <th>プランB</th>
        <th>プランC</th>
        <th>プランD</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>月額</td>
        <td><span class="en">3,000</span>円</td>
        <td><span class="en">5,000</span>円</td>
        <td><span class="en">15,000</span>円</td>
        <td><span class="en">30,000</span>円</td>
      </tr>
      <tr>
        <td>ドメイン管理</td>
        <td>—</td>
        <td>●</td>
        <td>●</td>
        <td>●</td>
      </tr>
      <tr>
        <td>サーバー管理</td>
        <td>—</td>
        <td>●</td>
        <td>●</td>
        <td>●</td>
      </tr>
      <tr>
        <td>サイトデータ<br>
          バックアップ</td>
        <td>—</td>
        <td>—</td>
        <td>●</td>
        <td>●</td>
      </tr>
      <tr>
        <td>メールアドレス発行</td>
        <td>●</td>
        <td>●</td>
        <td>●</td>
        <td>●</td>
      </tr>
      <tr>
        <td>アクセスレポート</td>
        <td>—</td>
        <td>—</td>
        <td>●</td>
        <td>●</td>
      </tr>
      <tr>
        <td>集客コンサルティング</td>
        <td>—</td>
        <td>—</td>
        <td>—</td>
        <td>●</td>
      </tr>
    </tbody>
  </table>
</div>
@media screen and (max-width: 640px) {
  .table-scroll {
    white-space: nowrap;
    overflow-x: scroll;
  }
}

固定してスクロールするレスポンシブ対応のtable

横スクロールが必要な大きな表で、一番左の項目名を常に表示させておく方法です。スクロールしても「どの行のデータか」が常に分かるため、比較表やスペック表のユーザビリティが劇的に向上します。CSSの position: sticky; と left: 0; を組み合わせるだけで、複雑なJavaScriptなしで実装可能です。

活用シーン行数・列数ともに多い複雑な表
メリットスクロールしても「何のデータか」が常にわかる
<div class="table-scroll">
 <table class="table-css05">
    <thead>
      <tr>
        <th></th>
        <th>プランA</th>
        <th>プランB</th>
        <th>プランC</th>
        <th>プランD</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>月額</td>
        <td><span class="en">3,000</span>円</td>
        <td><span class="en">5,000</span>円</td>
        <td><span class="en">15,000</span>円</td>
        <td><span class="en">30,000</span>円</td>
      </tr>
      <tr>
        <td>ドメイン管理</td>
        <td>—</td>
        <td>●</td>
        <td>●</td>
        <td>●</td>
      </tr>
      <tr>
        <td>サーバー管理</td>
        <td>—</td>
        <td>●</td>
        <td>●</td>
        <td>●</td>
      </tr>
      <tr>
        <td>サイトデータ<br>
          バックアップ</td>
        <td>—</td>
        <td>—</td>
        <td>●</td>
        <td>●</td>
      </tr>
      <tr>
        <td>メールアドレス発行</td>
        <td>●</td>
        <td>●</td>
        <td>●</td>
        <td>●</td>
      </tr>
      <tr>
        <td>アクセスレポート</td>
        <td>—</td>
        <td>—</td>
        <td>●</td>
        <td>●</td>
      </tr>
      <tr>
        <td>集客コンサルティング</td>
        <td>—</td>
        <td>—</td>
        <td>—</td>
        <td>●</td>
      </tr>
    </tbody>
  </table>
</div>
@media screen and (max-width: 640px) {
  .table-scroll {
    white-space: nowrap;
    overflow-x: scroll;
  }
  .table-css05 th:first-child, .table-css05 td:first-child {
    background: #fff;
    position: sticky;
    left: 0;
    z-index: 1;
  }
  .table-css05 th:first-child {
    background: #241a08;
  }
  .table-css05 th:first-child:before, .table-css05 td:first-child:before {
    content: "";
    margin-inline: -1px;
    position: absolute;
    inset: 0;
    z-index: -1;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
  }
}

まとめ

本記事では、CSSだけで完結するレスポンシブtableの代表的な方法を紹介しました。情報をカードのように見せる縦並び型や、データの相関関係を維持するスクロール型、そして利便性を飛躍させる固定型など、コンテンツの性質に合わせて最適な実装を選ぶことが重要です。

テーブルの表示崩れは単なる見た目の問題ではなく、ユーザーの離脱を招く重大なSEOリスクとなります。無理に情報を詰め込むのではなく、ユーザーがその表で何を知りたいのかを第一に考え、ストレスのない閲覧環境を構築しましょう。

同じカテゴリの記事一覧
Web反響ラボTOPへ

同じカテゴリの記事

よく読まれている記事

GOTOP