CSSのみで簡単にテーブルの表示をレスポンシブルデザインにしたい時

Javascriptも使わず、スタイルシートのみで簡単にテーブルのデザインを変更して、スマートフォン等でも見やすくすることが可能です。

CSS

/* 通常時の設定 */
#list-tbl{
	border-collapse: collapse;
}
#list-tbl th{
	width: 180px;
}
	#list-tbl th,
	#list-tbl td{
	border: 1px solid #ccc;
}

/* 800px以下になった場合の設定 */
@media only screen and (max-width:800px){
	#list-tbl th,
	#list-tbl td{
		width: auto;
		display: list-item;
		list-style-type: none;
		border: none;
	}
	#list-tbl th{
		color: #fff;
		background: #ccc;
	}
}

HTML

<table id="list-tbl">
<tbody>
<tr><th>1月3日</th><td>南方週末社説差し替え事件。同月7日より出版の自由を求めるデモが行われた。</td></tr>
<tr><th>1月13日</th><td>シボレー・コルベット7代目モデル(C7型)がアメリカの「デトロイトモーターショー13」プレビューイベントにて発表される。</td></tr>
<tr><th>1月16日〜20日</th><td>アルジェリア南部イナメナスの天然ガス関連施設をイスラム系武装勢力が襲撃し、日本人技術者を始めとする多数の死傷者が発生した。(詳細→アルジェリア人質拘束事件)</td></tr>
<tr><th>1月17日</th><td>ソマリアを正式承認。国交を樹立</td></tr>
<tr><th>1月20日</th><td>アメリカ合衆国大統領就任式。2012年11月の選挙の結果により、バラク・オバマ大統領が続投でアメリカ大統領に就任した。</td></tr>
<tr><th>1月22日</th><td>ロシアの小型衛星BLITSがスペースデブリに衝突。BLITSは衛星としての機能を喪失。当初は2007年1月11日に破壊された中国の気象衛星風雲1号Cの破片と思われていた。<br />スマトラ島の北部、アチェ州直下でマグニチュード(M)5.9の地震が発生、14歳の少女1人が死亡、15人が負傷した。(詳細→スマトラ島地震 (2013年1月))</td></tr>
</tbody>
</table>

PC(ウィンドウサイズ800px以上の場合の表示)
スクリーンショット 2013-06-21 14.41.57

スマートフォン等(ウィンドウサイズ800px未満の場合の表示)
スクリーンショット 2013-06-21 14.43.34

 

デジタルゲートがお手伝い

ホームページをリニューアルしたい、スマホ対応にしたい、デザインそのままで機能だけ追加したい、更新だけ代行して欲しい。サイトを運営したいけど誰に相談したらいいか分からない。そんな時はお気軽にお問い合わせください。

スポンサーリンク