「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%を設定 */
	}
}

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

ぜひ、お試しあれ!

ではまた!

コメントする

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

Leonard-Blogをもっと見る

今すぐ購読し、続きを読んで、すべてのアーカイブにアクセスしましょう。

続きを読む