tableのレスポンシブ対応をする際に、忘れていたので( ..)φメモしておきます。
いろんなパターンが考えられますが、ここでは2列複数行タイプのtableをレスポンシブ対応で1列(複数行)にする方法を書いておきます。
簡単にHTML構造を書いておきます↓例として2列3行の表のパターンにしておきます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<table> <tr> <th></th> <td></td> </tr> <tr> <th></th> <td></td> </tr> <tr> <th></th> <td></td> </tr> </table> |
PC対応の場合は、レスポンシブに対応するように<th><td>にそれぞれwidthを%で設定します。
スマホ対応になってくると画面幅が狭いので、これを全て1列で表現するとした時
1 2 3 4 5 6 |
tr, th, td { display: block; width: 1000%; } |
で表現できます。
ただし、各セルや見出しにボーダーを指定していた場合は、ボーダーの調整が必要になってきます。