【CSS】横スクロールを出さずに長い表をスマホで見やすくする方法

スマホで表を見せたいとき、横スクロールにする方法は手軽ですが、見たい列を左右に動かす必要があり、少し使いづらく感じることがあります。特に列数が多い表や、比較したい情報が細かい表では、画面内で内容を読み取りやすくする工夫が大切です。

この記事では、横スクロールを出さずに長い表をスマホで見やすくするCSSの考え方と、すぐに使える実装例を紹介します。表を無理に縮めるのではなく、スマホでは「表の見せ方」を切り替えるのがポイントです。

スマホで表が見づらくなる理由

PC向けの表は、横幅をしっかり使って複数の列を並べる前提で作られていることが多いです。しかしスマホでは画面幅が狭いため、そのまま表示すると文字が詰まり、読みにくくなります。

このとき、overflow-x: auto; で横スクロールを許可する方法はよく使われます。ただ、今回は「横スクロールを出さずに見やすくする」ことが目的なので、スマホでは表を別のレイアウトに変える方法を使います。

基本方針は「表をカード型に変える」こと

スマホ表示では、表をそのまま横に並べるのではなく、1行ずつ縦に積み重ねるカード型の見た目にすると読みやすくなります。各セルに「項目名」と「値」を対応させて表示するイメージです。

この方法なら、列数が多い表でも1つずつ内容を確認しやすく、画面を横に動かす必要がありません。

実装例：HTMLの表

まずは、よくある比較表のHTML例です。thead と tbody を使った一般的な構造にしています。

<table class="responsive-table">
  <thead>
    <tr>
      <th>プラン名</th>
      <th>月額料金</th>
      <th>容量</th>
      <th>サポート</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-label="プラン名">ライト</td>
      <td data-label="月額料金">980円</td>
      <td data-label="容量">10GB</td>
      <td data-label="サポート">メールのみ</td>
    </tr>
    <tr>
      <td data-label="プラン名">スタンダード</td>
      <td data-label="月額料金">1,980円</td>
      <td data-label="容量">50GB</td>
      <td data-label="サポート">メール・チャット</td>
    </tr>
    <tr>
      <td data-label="プラン名">プレミアム</td>
      <td data-label="月額料金">3,980円</td>
      <td data-label="容量">200GB</td>
      <td data-label="サポート">電話・チャット</td>
    </tr>
  </tbody>
</table>

data-label は、スマホ表示で「この値が何の項目か」を分かりやすくするために使います。PCでは見出し行を使い、スマホでは各セルの前にラベルを出す形にします。

CSSでスマホ時だけ縦並びにする

次にCSSです。PCでは普通の表として表示し、スマホ幅では各行をカードのように見せます。

.responsive-table {
  width: 100%;
  border-collapse: collapse;
}

.responsive-table th,
.responsive-table td {
  border: 1px solid #ddd;
  padding: 12px;
  text-align: left;
}

.responsive-table th {
  background: #f5f5f5;
}

@media screen and (max-width: 768px) {
  .responsive-table,
  .responsive-table thead,
  .responsive-table tbody,
  .responsive-table tr,
  .responsive-table th,
  .responsive-table td {
    display: block;
    width: 100%;
  }

  .responsive-table thead {
    display: none;
  }

  .responsive-table tr {
    margin-bottom: 16px;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
  }

  .responsive-table td {
    border: none;
    border-bottom: 1px solid #eee;
    position: relative;
    padding-left: 40%;
    box-sizing: border-box;
  }

  .responsive-table td::before {
    content: attr(data-label);
    position: absolute;
    left: 12px;
    top: 12px;
    width: 35%;
    font-weight: bold;
    color: #555;
  }

  .responsive-table td:last-child {
    border-bottom: none;
  }
}

このCSSでは、768px以下の画面幅になったときに表の各要素をブロック表示へ切り替えています。さらに、thead を非表示にして、各 td の data-label をラベルとして表示しています。

この方法のメリット

• 横スクロールを使わないので、スマホで操作しやすい
• 各項目の意味が分かりやすく、比較しやすい
• 列数が多い表でも内容を整理して見せられる
• 既存のHTML表を大きく崩さずに対応しやすい

注意したいポイント

この方法は見やすくて便利ですが、すべての表に向いているわけではありません。数値の一覧や、横方向の比較が重要な表では、カード型にすると全体の関係が見えにくくなることがあります。

また、data-label を各セルに入れる必要があるため、表の内容が多い場合は少し手間がかかります。そのため、表の重要度や見せたい情報に応じて、横スクロールと使い分けるのがおすすめです。

シンプルに使いたい場合の考え方

もし見出しが少なく、内容も短い表なら、スマホでは1列だけの縦リストに近い形へ変えるだけでも十分です。たとえば「項目名」と「値」だけを並べる表であれば、カード型にすることでかなり読みやすくなります。

一方で、複雑な表を無理にカード型へ変えると、逆に理解しづらくなることもあります。大切なのは、表の情報量に合わせて表示方法を選ぶことです。

まとめ

スマホで長い表を見やすくしたいなら、横スクロールを出すだけでなく、スマホ時だけカード型レイアウトに切り替える方法が有効です。display: block; と data-label を組み合わせれば、横に動かさなくても内容を確認しやすい表を作れます。

表の用途によって最適な見せ方は変わりますが、「スマホでは縦に整理して見せる」という考え方を覚えておくと、さまざまな画面サイズに対応しやすくなります。