NAKAZI LAB.(ナカジラボ)

Webサイト制作を円滑にすることを目的とした、cssやJavaScript(jQuery)の小技備忘録サイトです。

レスポンシブWebデザインでつくる際の狭いスクリーンで閲覧した時のtableタグのcssの書き方

2014年5月22日CSSテクニック

レスポンシブWebデザインでつくる際の狭いスクリーンで閲覧した時のtableタグのcssの書き方

テーブルで作った表は見出しと内容を左右に配置する見せ方が一般的ですが、スクリーンサイズが狭くなると文字が改行され見難くなる可能性があるので、スクリーンが狭くなった時にはthやtdのdisplayの値をblockやlist-itemに変更し、見出しと内容をそれぞれ1行に分けて表示することで見やすさを保持します。

デモページ

CSS

table {
	width: 80%;
	margin: 0 auto;
}
th,
td {
	border: #dcdcdc 1px solid;
	padding: 14px;
	box-sizing: border-box;
}
th {
	background-color: #52d3ff;
	width: 25%;
	color: #fff;
	font-weight: bold;
}
td {
	background-color: #ffffff;
	width: 75%;
}
@media screen and (max-width: 480px)  {
	table {
		width: 100%;
	}
	th,
	td {
		width: 100%;
		display: block;
		border: 0;
	}
}

デモページ

  • ̃Gg[͂ĂȃubN}[Nɒlj

関連記事

  1. レスポンシブWebデザインでつくる際の狭いスクリーンで閲覧した時のtableタグのcssの書き方

更新情報をチェックする

rss feedly twitter facebook

今週の人気記事TOP10

サイト内検索

中の人

nakazi

Web関係のお仕事をしてます。効率化が大好きです。当サイトの更新情報やWeb制作に関する事を@nakazilabでつぶやいています。

連絡先

nakazilab[atmark]gmail.com