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

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

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

CSS:「縦並び」を「横並び」に

テーブル要素を「横にならえ！」

• table の display要素 を block に変更
• tr の display要素 を inline に変更
• td の display要素 を inline-block に変更

１－１	１－２	１－３	１－４	１－５	１－６	１－７	１－８
２－１	２－２	２－３	２－４	２－５	２－６	２－７	２－８

<table class="Table">
	<tr>
	<td>１－１</td>
	<td>１－２</td>
	<td>１－３</td>
	<td>１－４</td>
	<td>１－５</td>
	<td>１－６</td>
	<td>１－７</td>
	<td>１－８</td>
	</tr>
	<tr>
	<td>２－１</td>
	<td>２－２</td>
	<td>２－３</td>
	<td>２－４</td>
	<td>２－５</td>
	<td>２－６</td>
	<td>２－７</td>
	<td>２－８</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>

リストのブロック要素を「横にならえ！」

リストの縦並びなブロック要素を横並びに変更します。

↑　display: inline-block;
↓　display: inline;

<div class="UL_LI">
<ul>
	<li>１－１</li>
	<li>１－２</li>
	<li>１－３</li>
	<li>１－４</li>
	<li>１－５</li>
	<li>１－６</li>
	<li>１－７</li>
	<li>１－８</li>
	<li>２－１</li>
	<li>２－２</li>
	<li>２－３</li>
	<li>２－４</li>
	<li>２－５</li>
	<li>２－６</li>
	<li>２－７</li>
	<li>２－８</li>
</ul>
</div>

<style>
.UL_LI ul{text-align: left;} 
.UL_LI li{ 	
	display: inline-block;
	border: solid 1px; 
} 
</style>