tableをレスポンシブ対応してスマホでも見やすくする【CSS】

横1行がひとつの項目となる場合

次のような横1行が1項目となるシンプルな表は単純に縦並びにするだけで解決できます。

See the Pen responsive-table-1 by web-souko (@web-souko) on CodePen.

<tr>に含まれる要素を縦並びにして対応する

th, tdにdisplay: block;とwidth: 100%;を追加してセルを縦並びにすることで画面幅の小さいディスプレイに対応します。

See the Pen responsive-table-1.1 by web-souko (@web-souko) on CodePen.

メディアクエリを使ったCSS記述例

モバイル表示を基本としたメディアクエリを指定するとこんな感じになります。
実装する際は状況に応じて調整してみてください。

table {
  border-collapse: collapse;
}
th, td {
  display: block;
  width: 100%;
  text-align: left;
  border: 1px solid #CCC;
  padding: .2em .5em;
}
th {
  background: #ffe4e1;
}

@media (min-width: 960px) {
  th, td {
    display: table-cell;
    width: auto;
  }
}

縦1列が1項目となる場合

商品の比較等でよく使われるパターンです。
このような縦1列が1項目となる表の場合、<tr>内の要素を縦並びにする方法では対応できません。

See the Pen responsive-table-3 by web-souko (@web-souko) on CodePen.

横スクロールで対応する

内容によっては画面内に収めず横スクロールで対応したほうが見やすい場合もあります。
特に左右の列を比較する内容の場合は有効です。横スクロール可能なことが分かるような配慮も必要です。

※ 解説のため親要素の幅を狭く指定しています。

See the Pen responsive-table-3.1 by web-souko (@web-souko) on CodePen.

---

縦横に見出しがある場合

このパターンでは、1行目（最上段）に見出しがあるということ以外は前述した「横1行がひとつの項目となる場合」と同じです。
つまり最上段以外は縦並びにすることで解決できそうです。

See the Pen responsive-table-2 by web-souko (@web-souko) on CodePen.

カスタムデータ属性で見出しを補う方法

HTML側で<td>にカスタムデータ属性data-typeを追加し、値として<td>の内容が属する分類名を記述します。

次にCSSで1行目の見出しにdisplay: none;を指定し、それ以外の<tr>に含まれる要素を縦並びにします。<td>の疑似要素にcontent: attr(data-type);でカスタムデータ属性を読み込んで分類名を表示します。

See the Pen responsive-table-2.1 by web-souko (@web-souko) on CodePen.

メディアクエリを使ったCSS記述例

table {
  border-collapse: collapse;
}
tr:first-child {
  display: none;
}
th, td {
  display: block;
  width: 100%;
  text-align: left;
  border: 1px solid #CCC;
  padding: .2em .5em;
}
th {
  background: #ffe4e1;
}
td::before {
  display: inline-block;
  content: attr(data-type);
  width: 7em;
}

@media (min-width: 960px) {
  tr:first-child {
    display: table-row;
  }
  th, td {
    display: table-cell;
    width: auto;
  }
  td::before {
    display: none;
  }
}

data-* （カスタムデータ属性）

カスタムデータ属性は要素に独自の属性を追加できます。
上の例ではカスタムデータ属性data-typeに"画面サイズ"と"重量"というデータを指定しています。

参考リンク
MDN Web Docs – data-* （カスタムデータ属性）

<table>を使わない

<table>をレスポンシブにするという趣旨とは異なりますが、内容によっては他の要素を検討するのもいいかもしれません。たとえば説明リスト要素である<dl>を使い、十分な表示領域があればCSSのdisplay: table;で<table>のように表示することもできます。

「表をレスポンシブにする」のではなく「レスポンシブで表にする」といったイメージでしょうか。

See the Pen responsive-table-231012 by web-souko (@web-souko) on CodePen.

参考リンク
MDN Web Docs – <dl>: 説明リスト要素

---