CSSで作るレスポンシブtableデザイン＆コーディング

2022年12月7日

マークアップの歴史だとXHML、HTML5、HTML Living Standard全てにおいて使われ続けているtableタグ

tableタグはノーコードでもCMSでも汎用的なHTMLタグとして現在も活用されています。
特に会社概要のページはtableタグを使うことも多いのでカスタマイズ例含め覚えておくととても便利です。

表を作成するためのマークアップ要素table

下記は古くからあるよくある表の一般例

<table>
  <tbody>
  <tr>
    <th>商品名</th>
    <th>価格</th>
  </tr>
  <tr>
    <td>りんご</td>
    <td>100円</td>
  </tr>
  <tr>
    <td>みかん</td>
    <td>150円</td>
  </tr>
  </tbody>
</table>

上記コードで以下のように表示されます

現在はレスポンシブでページを作ることが一般的なため、企業サイトがよく使うCSSデザイン例を含めご紹介。

tableタグをレスポンシブ対応CSSにするコード

/* tableタグをレスポンシブ対応cssにする */
table {
  width: 100%;
  border-collapse: collapse;
}

/* テーブルセルを幅いっぱいに拡大する */
td,
th {
  padding: 10px;
  border: 1px solid #ddd;
}

/* 縦方向には幅を自動拡大し、横方向には幅を固定する */
@media only screen and (max-width: 600px) {
  /* テーブルセルを横方向に折り返す */
  td,
  th {
    display: block;
    width: auto;
    text-align: left;
  }
}

画面の幅が狭くなったときに、tableタグが自動的に幅100%拡大し、セルが横方向に折り返されるようになる一般的な方法。

このコードはあくまでも一例であり、実際に使用する場合は、特定のクラス指定、WordPressの場合はid分岐など必要に適宜修正してください。

tableタグをレスポンシブ時、横2列にする

table {
  table-layout: fixed;
  width: 100%;
}

td {
  width: 50%;
}

一列にしたい場合はwidthを100%に指定

tableタグを横スクロールさせる

項目が多くなると、レスポンシブ対応ではなく横スクロールが必要になってきます。
その場合は以下コードを指定してください

/* tableタグを横方向にスクロールさせる */
table {
  display: block;
  overflow-x: auto;
}

よく利用されるケースは成分表などを画像化しない場合に活用できます。

table内、thのみ線をつける

/* tableタグの先頭要素（th）だけに罫線を付ける */
table {
  border-collapse: collapse;
}

/* 先頭要素（th）罫線を付ける */
th {
  border-bottom: 1px solid #000;
}

テーブルはデフォルトのままだと微妙なボーダー（枠線）がつくため、thだけ、かつ下にだけ線をつけたい場合にご活用くださいtdにつけたい場合はtdに指定してください。

tableタグ使わない。使いたくない

検索にも多い『tableは使わない。』という関連記事に関しては、タグが多くなりすぎる＆管理が大変など様々なメリット・デメリットがあると思います。ただ、HTML5以降のHTML Living Standardでも定義されているので、今から覚える方もWebに関してはデメリットのないタグの一つです。

WordPressブロックエディタはデフォルトでレスポンシブ対応。
個々でデザイン、カスタマイズしたい場合にお役立てください

リビジョン株式会社では、WordPressのカスタマイズ、コーディングも対応しております。お悩みの場合はお気軽にフォームよりご相談ください。

Recent Entries