HTMLで作成したtableをレスポンシブ対応させる方法

はじめに

業務システムやデータ一覧の表示でよく使われるHTMLのtableタグ。
でも、スマホやタブレットで見ると「文字がつぶれる」といった課題が発生しやすい要素でもあります。

この記事では、テーブルをスマホでも見やすく表示するレスポンシブ対応の基本テクニックを、サンプルコード付きでわかりやすく解説します。

tableの作り方

まずは基本的なテーブルを作ります。

index.html

<table>
  <thead>
    <tr>
      <th>名前</th>
      <th>年齢</th>
      <th>職業</th>
      <th>メール</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>田中 太郎</td>
      <td>28</td>
      <td>エンジニア</td>
      <td>[e-mail]</td>
    </tr>
    <tr>
      <td>鈴木 花子</td>
      <td>34</td>
      <td>デザイナー</td>
      <td>[e-mail]</td>
    </tr>
  </tbody>
</table>

CSSを当てて見やすくする

まずはPCでの見やすさを意識して、枠線や背景色を整えます。

style.css

table {
  border-collapse: collapse;
  width: 90%;
  margin: 30px auto;
}
th, td {
  border: 1px solid #aaa;
  padding: 8px 12px;
  text-align: left;
}
th {
  background-color: #f5f5f5;
}
tr:nth-child(even) {
  background-color: #fafafa;
}

レスポンシブ対応：基本パターン

テーブルのレスポンシブ対応でもっとも手軽なのは、テーブルを横スクロール可能にする方法です。

style.css

/* ここから */
.responsive-table {
  overflow-x: auto;
  width: 100%;
}
.responsive-table table {
  min-width: 600px; /* 表全体の最小幅 */
}
/* ここまで追記 */

index.html

<!-- ここから -->
<div class="responsive-table">
<!-- ここまで追記 -->
  <table>
    <!-- 先ほどと同じ -->
  </table>
<!-- ここから -->
</div>
<!-- ここまで追記 -->

ポイント

• <div>でテーブルをラップし、そこにoverflow-x: auto;を付けるだけ
• スマホなど狭い画面では「横スクロールバー」が現れます
• PCでは今まで通り幅90%などで見やすく表示

レスポンシブ対応：スマホで縦型リスト風に表示したい場合

カラムが多い場合や、「スマホではリスト風で十分」というときは、CSSで1カラムごとにブロック表示に変える方法もあります。

style.css

/* ここから */
@media screen and (max-width: 600px) {
  table, thead, tbody, th, td, tr {
    display: block;
  }
  table {
    width: 100%;
  }
  tr {
    margin-top: 20px;
  }
  thead {
    display: none;
  }
  td {
    position: relative;
    padding-left: 50%;
  }
  td::before {
    content: attr(data-label);
    position: absolute;
    left: 10px;
    font-weight: bold;
  }
}
/* ここまで追記 */

下記のindex.htmlは以前のコードをすべてまっさらにしてから書き直してください。
HTML側でdata-label属性を使う方法に書き直します。

index.html

<table>
  <thead>
    <tr>
      <th>名前</th>
      <th>年齢</th>
      <th>職業</th>
      <th>メール</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-label="名前">田中 太郎</td>
      <td data-label="年齢">28</td>
      <td data-label="職業">エンジニア</td>
      <td data-label="メール">[e-mail]</td>
    </tr>
    <tr>
      <td data-label="名前">鈴木 花子</td>
      <td data-label="年齢">34</td>
      <td data-label="職業">デザイナー</td>
      <td data-label="メール">[e-mail]</td>
    </tr>
  </tbody>
</table>

ポイント

• スマホでは、各tdの左側にdata-labelの項目名が自動で表示
• 1行ごとにカードのような見た目になり、横スクロール不要

どちらのレイアウトにするかのポイント

• テーブルのカラムが10列以上など多い場合は「横スクロール方式」がおすすめです
• 少ない場合や情報量を絞れる場合は「縦型リスト変換」も効果的

最後に

HTMLテーブルは標準ではレスポンシブ対応していませんが、CSSのちょっとした工夫で

• 横スクロール対応
• スマホでの見やすいリスト表示など、現代的なレイアウトも十分可能です

業務システムやデータ一覧のUIを作るとき、ぜひ本記事のサンプルをベースにアレンジしてみてください！