cssでテーブルをレスポンシブに
一番よく使うシンプルな方法の覚書
<table class="spotinfo">
<tbody>
<tr>
<th>所在地</th>
<td>西宮市甲子園町1<br /><span>(最寄駅 阪神「甲子園」)</td>
</tr>
<tr>
<th>電話番号</th>
<td>078-904-2760</td>
</tr>
</tbody>
</table>
幅420px以下の画面のときに 見出しセルと内容セルを縦に積んでワンカラムにするCSS
@media only screen and (max-width:420px){
table th,td {
display:block;
}
}
その他のスタイル設定(枠線とか背景色とか)を施したサンプルは、こちら
この記事へのコメントはありません。