table2列複数行タイプをレスポンシブで1列にする方法

この記事は約1分で読めます。

tableのレスポンシブ対応をする際に、忘れていたので( ..)φメモしておきます。
いろんなパターンが考えられますが、ここでは2列複数行タイプのtableをレスポンシブ対応で1列(複数行)にする方法を書いておきます。

簡単にHTML構造を書いておきます↓例として2列3行の表のパターンにしておきます。

PC対応の場合は、レスポンシブに対応するように<th><td>にそれぞれwidthを%で設定します。

スマホ対応になってくると画面幅が狭いので、これを全て1列で表現するとした時

で表現できます。

ただし、各セルや見出しにボーダーを指定していた場合は、ボーダーの調整が必要になってきます。

タイトルとURLをコピーしました