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

Memo

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

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

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

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

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

pcで横並び

スマホで縦並び

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

コメント

  1. クノン より:

    素晴らしい!です。他の方の説明は難しく長い割には思った事が出来ず、こちらに来ました。
    家宝にします。(冗談じゃ無く!!)

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