- レスポンシブに、tableの頑固な箱組を解体しましょう。ブラウザ幅を変更すると、ブレークポイントを境に、すべてのセルが「横にならえ!」と組かわります。
- リストはブロック要素なので、そのままでは縦に整列してます。これも「横にならえ!」させましょう。
それぞれ似たような状態になります。
CSS:「縦並び」を「横並び」に
テーブル要素を「横にならえ!」
- table の display要素 を block に変更
- tr の display要素 を inline に変更
- td の display要素 を inline-block に変更
1-1 | 1-2 | 1-3 | 1-4 | 1-5 | 1-6 | 1-7 | 1-8 |
2-1 | 2-2 | 2-3 | 2-4 | 2-5 | 2-6 | 2-7 | 2-8 |
<table class="Table">
<tr>
<td>1-1</td>
<td>1-2</td>
<td>1-3</td>
<td>1-4</td>
<td>1-5</td>
<td>1-6</td>
<td>1-7</td>
<td>1-8</td>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
<td>2-4</td>
<td>2-5</td>
<td>2-6</td>
<td>2-7</td>
<td>2-8</td>
</tr>
</table>
<style>
@media only screen and (max-width:991px){
Table {
display: block;
border: none;
}
Table tr {
display: inline;
}
Table td {
display: inline-block;
}
}
</style>
リストのブロック要素を「横にならえ!」
リストの縦並びなブロック要素を横並びに変更します。
- 1-1
- 1-2
- 1-3
- 1-4
- 1-5
- 1-6
- 1-7
- 1-8
- 2-1
- 2-2
- 2-3
- 2-4
- 2-5
- 2-6
- 2-7
- 2-8
↑ display: inline-block;
↓ display: inline;
- 1-1
- 1-2
- 1-3
- 1-4
- 1-5
- 1-6
- 1-7
- 1-8
- 2-1
- 2-2
- 2-3
- 2-4
- 2-5
- 2-6
- 2-7
- 2-8
<div class="UL_LI">
<ul>
<li>1-1</li>
<li>1-2</li>
<li>1-3</li>
<li>1-4</li>
<li>1-5</li>
<li>1-6</li>
<li>1-7</li>
<li>1-8</li>
<li>2-1</li>
<li>2-2</li>
<li>2-3</li>
<li>2-4</li>
<li>2-5</li>
<li>2-6</li>
<li>2-7</li>
<li>2-8</li>
</ul>
</div>
<style>
.UL_LI ul{text-align: left;}
.UL_LI li{
display: inline-block;
border: solid 1px;
}
</style>
コメント