「table」レイアウトが2列だけの場合、レスポンシブ対応はどないする？

8月の半分以上が過ぎ、猛暑日が続きますね…

体調には気を付けて、水分補給もまめに取ってくださいね。

ついでに、塩分補給も忘れないようにね！

さてと、話題に戻して…

「table」レイアウトが2列だけの場合、レスポンシブ対応はどないする？

たまたま、他業者が作ったWebサイトがなぜかこっちに依頼する案件が増えてます。

低価格で提供をしてますが…

他業者が作ったWebサイトを見た感じではかなりいい感じに仕上がっていますが、中身のCSSやHTMLファイルを見るとほぼ適当に記述されていますね…

～ここまでの愚痴でした…～

さてと、「table」レイアウトをデザインをしていく中で、たったの2列目だけしかないデザインの場合、レスポンシブはどないしてるか検証していきましょう！

ほかのサイトはほとんど、スマホで閲覧するときは2列目表示をしたり、1列目表示をしたりしていますね。

<table>
	<tbody>
		<tr>
			<th>タイトル01</th>
			<td>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</td>
		</tr>

		<tr>
			<th>タイトル02</th>
			<td>ダミーテキストダミーテキストダミーテキスト</td>
		</tr>

		<tr>
			<th>タイトル03</th>
			<td>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</td>
		</tr>

		<tr>
			<th>タイトル04</th>
			<td>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</td>
		</tr>
	</tbody>
</table>

table{
	border: 3px solid #999;
	margin: 0 auto  30px;
	padding: 0;
	width: 600px;
}

table th,
table td{
	border: 1px solid #CCC;
	padding:10px;
}

table th{
	background: #666;
	color: #FFF;
	font-weight: 700;
	width:180px;
}

ここまではPC版ではこういう感じの表示になっています。

スマホ版ではどんな表示になっているのか、検証してみたらこういう結果になってしまいました。

タイトル部分だけ幅広くてテキスト部分が狭く感じてますよね…

解消方法はおわかりでしょうか？

2列から1列にするだけで解消できます。

table{
	border: 3px solid #999;
	margin: 0 auto  30px;
	padding: 0;
	width: 600px;
}

table th,
table td{
	border: 1px solid #CCC;
	padding:10px;
}

table th{
	background: #666;
	color: #FFF;
	font-weight: 700;
	width:180px;
}
@media screen and (max-width:480px) {
	table{
		width: 100%;/* 幅いっぱい表示をさせるために100%を設定 */
	}

	table th,
	table td{
		display:block;
		margin:0 0 -1px;/* 線を1px重ねる */
	}

	table th{
		width: 100%;/* 幅いっぱい表示をさせるために100%を設定 */
	}
}

検証結果、無事に一列に表示をすることができました。

ぜひ、お試しあれ！