【レスポンシブ】テーブル 表の横並びを縦並びに「前にならえ！」

表の横並びを縦並びに組替します。会社概要とかお問い合わせ欄などの単純な２列表組で、よく使います。

displayプロパティは要素の表示形式です。table要素は箱型表示。block要素は縦に並び、inline要素は横に並びます。明快ですね。

実際に、ブラウザの横幅を変えるとテーブルの段組みが変わります。

「PCで横並び」を「スマホの幅で縦並び」に

●●●●●●●●●●●●	○○○○○○○○○○○○
●●●●●●●●●●●●	○○○○○○○○○○○○

• tableで横並びのセル（thとtd）を
• スマホサイズでblock要素に指定（ここでは便宜的に991px）
• セル（thとtd）がブロック要素になるので
• 表示領域幅で広がり縦一列に並ぶ

<table class="Table">
	<tr>
	<th>●●●●●●●●●●●●</th>
	<td>○○○○○○○○○○○○</td>
	</tr>
	<tr>
	<th>●●●●●●●●●●●●</th>
	<td>○○○○○○○○○○○○</td>
	</tr>
</table>

<style>
/*--------
 FORM
----------*/
.Table{
}
.Table td,
.Table th{
}
@media only screen and (max-width:991px){
	.Table {
	}
	.Table th,
	.Table td{
		display: block;
	}
}
</style>