<tbody><tr><th>所在地</th><td>西宮市甲子園町1<br /><span>…" />

あれやこれや自分のための覚書

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;
	}
}

その他のスタイル設定(枠線とか背景色とか)を施したサンプルは、こちら

関連記事

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近のコメント

    RSS へのコメント

    • エラーが発生しました。フィードの配信が停止している可能性があります。再度お試しください。
    友だち追加