【レスポンシブ】tableタグを縦並びで表示する方法

こんにちは。すずきです。

この記事では、<table>タグを使った縦並びにする方法について紹介します。

レスポンシブデザインは、スマホ視聴が急増している現代においてとても重要な要素です。
特に、<table>のような複数の列を持つコンテンツの場合、PCでの表示方法とは異なる縦並びの表示方法が必要になる場合もあります。

レスポンシブなデザインの1つとして、<table>タグを使った縦並びができると、対応の幅も広がるかと思います！

縦並びの実装方法

<table>内の<th>と<td>タグを縦並びで表示するには、CSSのdisplay: block;を使用して、要素をブロックレベル要素に変更する必要があります。

以下は、<th>と<td>タグを縦並びに表示する例です。

See the Pen テーブルを縦並びで表示 by すずき (@k-suzuki3533) on CodePen.

<table>
  <tr>
    <th>ヘッダー1</th>
    <td>セル1</td>
  </tr>
  <tr>
    <th>ヘッダー2</th>
    <td>セル2</td>
  </tr>
  <tr>
    <th>ヘッダー3</th>
    <td>セル3</td>
  </tr>
</table>

th,
td {
  display: block;
}

この例では、以下のように設定しています。

このように設定することで、<th>と<td>タグを縦並びで表示することができます。

ただ、このままではPC表示にも影響が出てしまうので、実際に使用する場合はブレイクポイントを指定して実装する形になります。

@media screen and (max-width: 767px) {
  th,
  td {
    display: block;
  }
}

テーブルタグを縦並びで表示するメリット

<table>タグを縦並びに表示することのメリットは以下の通りです。

レスポンシブなデザインが実現できる

縦並びに表示することで、モバイル端末のような小さな画面でも見やすく、ユーザーがコンテンツをスクロールする必要がなくなるため、ユーザー体験を向上させることができます。

複数の列を持つコンテンツを扱う場合に有用

<table>タグは複数の列を持つコンテンツを扱う際に非常に有用ですが、デスクトップブラウザで表示した場合には、横に広がるため、画面が小さい場合は表示しきれないことがあります。縦並びに表示することで、コンテンツが見やすくなります。

シンプルで見やすいデザインが実現できる

<table>タグは、テーブルの情報を一覧表示することができるため、情報量が多い場合でも縦並びに表示することで、シンプルで見やすいデザインを実現することができます。

このように、<table>タグを使用してテーブルを縦並びに表示することで様々なメリットがあります。

終わりに

<th>と<td>タグの要素をブロックレベルに変更することで、簡単に縦並びに表示させることができます。

特にスマホ視聴の場合、縦並び表示で得られるメリットも多いので、必要に応じて縦に表示させることでユーザー体験の向上にも繋がります。