[CSS] tableのthとtdをスマホ表示のときは縦に並べる

この記事は、2020-05-15に別のブログ媒体に投稿した記事のアーカイブです。

簡単なCSSのお話です。

やりたいこと

table を、こういう感じでスマホ表示のときは th と td が縦に並ぶようにしたい。

やり方

前提

まず、マークアップは普通のテーブルだとしましょう。

<table>
  <tbody>
    <tr>
      <th>項目1</th>
      <td>データ1</td>
    </tr>
    <tr>
      <th>項目2</th>
      <td>データ2</td>
    </tr>
    <tr>
      <th>項目3</th>
      <td>データ3</td>
    </tr>
  </tbody>
</table>

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

tr {
  border-bottom: 1px solid #ccc;
}

th, td {
  text-align: left;
}

このコードで、このようなテーブルができます。

解法

このテーブルに冒頭のデモのような挙動を持たせるには、以下のようなCSSを書けばよいです。

@media (max-width: 576px) {
  th, td {
    display: inline-block;
    width: 100%;
    float: left;
  }
}

簡単すぎて、わざわざ記事にする必要あったのかというレベルですね😅

でも意外と思いつかないような気もするので、どこかの誰かのお役に立てば嬉しいです！

一応、動作例も置いときます。