表リストの2列の場合、スマホ版で表示する方法

4月に半ばになり、桜がもう若葉からそろそろ夏の風物詩に進化していってますね。

外の気温もだんだんと上昇してきましたね…

外に出かけるとほぼマスクをしてる人が多いんですね…

でも、外で外出するときはほぼマスクしていない人が何人か見かけるようになりました。

みんなが、マスクを脱却する日は数年後になるんじゃないかね？

さてと、話題に入りましょう！

表リストの2列の場合、スマホ版で表示する方法

表が2列しかない時に、スマホ版で表示する方法はどないしてますか？

こちらでは、昨日までのブログの中の技術をご紹介しましたが、2列だけではなく3列以上の場合の表示方法でしたね。

でも、2列しかないという時は縦1段に返信するだけで十分なんです！

CSSにdisplay:block;を入れるだけでOK！

そんなの簡単でしょ？

とりあえず、CSSの設定方法を教えますね。

※リセットスタイルをそのまま継承したときのCSSを解説しております。

table{
	border:1px solid #666;
	margin:0 auto;
	padding:0;
	width:100%;
}

table th,
table td{
	border:1px solid #999;
	padding:10px;
	vertical-align:top;
}

ここまでは、PC版の通常デフォルトのCSSですね。

PC版ではちょうど2列綺麗に表示してますね。

でも、スマホ版になると半々の列になりますね…

それを解消するためには2列目を1列目にシフトチェンジするだけです！

table{
	border:1px solid #666;
	margin:0 auto;
	padding:0;
	width:100%;
}

table th,
table td{
	border:1px solid #999;
	padding:10px;
	vertical-align:top;
}

@media screen and (max-width:480px) {
	table{
		width:100%;
	}

	table th,
	table td{
		display:block; /* ブロック要素に設定 */
		width:100%; /* スマホ版の横幅いっぱい設定 */
	}

	table th{
		background:#666; /* ユーザービリティを向上させるためにタイトル部分の色を設定 */
		border-bottom:none; /* 二重線解消のために、下線を非表示 */
		color:#fff;
	}
}

これで2列目から1列目にシフトチェンジしました。

ご参考までに！

では、また！