表の横並びを縦並びに組替します。会社概要とかお問い合わせ欄などの単純な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>
コメント
素晴らしい!です。他の方の説明は難しく長い割には思った事が出来ず、こちらに来ました。
家宝にします。(冗談じゃ無く!!)