【簡単】tableタグをスマホでは縦並びにする方法【レスポンシブ】

二列組のtableタグをスマホでは縦並びにしたい。

またレスポンシブになるよう、デバイス幅によって可変するようにしたい。

本記事ではCSSを使い、このような悩みを解決します。

HTMLサンプル

<table>
  <tbody>
    <tr>
      <th>タイトル</th>
      <td>テキストテキスト</td>
    </tr>
  </tbody>
</table>

上記は二列組のtableタグ サンプルです。

thとtdが横並びにテーブル組される作りになります。

これをスマホ時、縦並び(thが上、tdが下)にしたいと思います。

CSSサンプル

@media screen and (max-width: 767px) {
table {
  display: block;
  width: 100%;
}
table tbody {
  display: block;
  width: 100%;
}
table tr {
  display: block;
  width: 100%;
}
table th {
  display: block;
  width: 100%;
}
}

スマホ時、縦並びにするCSSサンプルです。

まずメディアクエリでスマホのデバイスだけCSSを効かせるように指定します。

後は、table、tbody、tr、thにdisplay: block;、width: 100%;を指定してあげればOK。

これだけでテーブル要素をブロック要素に変更し、デバイス幅によって可変する縦並びテーブルレイアウトの完成です。

まとめ

スマホファーストでコーディングすると、PCコーディング時、縦並びから横並びにまた戻さなければいけないので、メディアクエリを使ってスマホだけ本記事で扱ったCSSコードを適用するとスムーズにレスポンシブコーディングができるかと思います。

以上で解説をおわります。

Ads

関連記事

WordPress プログラミング

【簡単】wordpressでカテゴリーの順番を変更する方法【プラグインで解決】

2022.03.26
17
JavaScript プログラミング

【簡単】jQueryを使って、入力中の値をリアルタイムでチェック・取得する方法

2022.03.24
211
HTMLCSS プログラミング

CSSで画像の高さを一律にそろえる方法【結論:object-fitを使えば簡単です】

更新日:2021.01.08
894
HTMLCSS プログラミング

【簡単CSS】ある要素位置までスクロールしたらその要素を固定する方法【JavaScript不要】

2022.03.27
84