WEB Tips デザイン・コーディング

レスポンシブデザインのテーブルレイアウト

レスポンシブデザインのテーブルレイアウト

レスポンシブデザイン時のテーブルレイアウトの一つの参考。

600px以下で表示したときには、セルの幅が狭くなり過ぎて見づらくなるのを解消するため、横スクロールさせる。

幅600pxのテーブル

見出しA 見出しB 見出しC 見出しD
コンテンツA コンテンツA コンテンツAコンテンツA コンテンツAコンテンツAコンテンツA
コンテンツBコンテンツB コンテンツB コンテンツBコンテンツBコンテンツB コンテンツBコンテンツB
コンテンツCコンテンツCコンテンツC コンテンツCコンテンツCコンテンツCコンテンツC コンテンツCコンテンツC コンテンツCコンテンツCコンテンツC

HTML

<div class="tblwrapper">
<table class="rdtbl">
<thead>
<tr>
<th>見出しA</th>
<th>見出しB</th>
<th>見出しC</th>
<th>見出しD</th>
</tr>
</thead>
<tbody>
<tr>
<td>コンテンツA</td>
<td>コンテンツA</td>
<td>コンテンツAコンテンツA</td>
<td>コンテンツAコンテンツAコンテンツA</td>
</tr>
<tr>
<td>コンテンツBコンテンツB</td>
<td>コンテンツB</td>
<td>コンテンツBコンテンツBコンテンツB</td>
<td>コンテンツBコンテンツB</td>
</tr>
<tr>
<td>コンテンツCコンテンツCコンテンツC</td>
<td>コンテンツCコンテンツCコンテンツCコンテンツC</td>
<td>コンテンツCコンテンツC</td>
<td>コンテンツCコンテンツCコンテンツC</td>
</tr>
</tbody>
</table>
</div>

CSS

.tblwrapper{
	overflow-x:auto;
	-webkit-overflow-scrolling:touch;	
}
table.rdtbl{
	width:600px;
	border-collapse:collapse;
	border:1px solid #aaa;
}
table.rdtbl th,
table.rdtbl td{
	padding:8px;
	border:1px solid #aaa;
}
table.rdtbl th{
	background:rgb(165,255,255);
	text-align:center;
}

tableを囲んだdivに

overflow-x:auto;
-webkit-overflow-scrolling:touch;

を入れると、PCでは横スクロール、スマホなどでは左右にスワイプできます。

今月キャンペーン特典があるサービス

  • ConoHa WING
    WINGパック36ヶ月で月額652円 55%OFF - 2023年3月31日(金)16:00まで
  • エックスサーバー
    月額費用が最大30%オフの693円&ドメイン永久無料、さらに移転代行も0円中 - 2023年4月21日(金)12:00まで
  • Xserverビジネス
    12ヶ月以上契約で初期費用無料、3ヶ月・6ヶ月で初期費用半額 - 2023年4月4日(火)12:00まで
  • カラフルボックス
    .jp取り扱いスタート。BOX2以上の月額費用が25%OFFのクーポンコード「SERVER25

-WEB Tips, デザイン・コーディング
-