【レスポンシブ】テーブル要素とブロック要素を「横にならえ!」

Memo
  1. レスポンシブに、tableの頑固な箱組を解体しましょう。ブラウザ幅を変更すると、ブレークポイントを境に、すべてのセルが「横にならえ!」と組かわります。
  2. リストはブロック要素なので、そのままでは縦に整列してます。これも「横にならえ!」させましょう。

それぞれ似たような状態になります。

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>

コメント

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