テーブル(table/tr/th/td)の修正

viewportタグ(<meta name="viewport" content="width=device-width, initial-scale=1.0">)を使用時、スマートフォン用の一般的な画面幅(320px)を超える要素があると、画面のレイアウトが大きく崩れてしまいます。また、「モバイルフレンドリーテスト」でも、「コンテンツの幅が画面の幅を超えています」と警告されます。

その原因は、テーブルタグ(table/tr/th/td)の幅が「width:500px」のように「px」単位で指定してあったり、横方面へのカラム数が多すぎることです。

スマホの画面幅をはみだしたテーブル

まずは、「px」単位で指定した幅の修正を行いましょう。

見出し1 セル1
見出し2 セル2

【HTML】

<table class="main_table">
<tr>
<th>見出し1</th>
<td>セル1</td>
</tr><tr>
<th>見出し2</th>
<td>セル2</td>
</tr>
</table>

【CSS】

.main_table {
	width:500px;
}
.main_table th ,.main_table td {
	width:250px;
}

.main_table {
	width:100%;
}
.main_table th ,.main_table td {
	width:50%;
}
カラム数が多い時は…

また、カラム数が多いテーブルは、画面の幅が狭いスマートフォンでは非常に見にくい為、下記のようにスタイルシートを変更しましょう。

floatを使ったレイアウト

【HTML】

<table class="main_table">
<tr>
<td>STEP1</td>
<td>STEP2</td>
</tr><tr>
<td>STEP3</td>
<td>STEP4</td>
</tr>
</table>

【CSS】

.main_table {
	width:500px;
}
.main_table td {
	width:250px;
}

.main_table {
	width:100%;
}
.main_table td {
	width:100%;
	display:block;
}
画面からはみ出す横長のテーブルは……

下のような横に長いテーブルは、スマートフォンの狭い画面内に抑えることが難しく、どうしても画面からはみ出てしまいます。当然、モバイルフレンドリーテストでも、OKが出ません。HTML自体のコードを変えて修正するのが最も良いですが、スタイルシートだけで解決したい場合には、項目内の文字や画像をできるだけ小さく表示させることで、画面内に収めることができる場合もあります。

見出し1 見出し2 見出し3 見出し4 見出し5
セル1 セル2 セル3 セル4 セル5

【HTML】

<table class="main_table">
<tr>
<th>見出し1</th>
<th>見出し2</th>
<th>見出し3</th>
<th>見出し4</th>
<th>見出し5</th>
</tr><tr>
<td>セル1</td>
<td>セル2</td>
<td>セル3</td>
<td>セル4</td>
<td>セル5</td>
</tr>
</table>

【CSS】

.main_table {
	width:500px;
}
.main_table th ,.main_table td {
	width:50px;
}

.main_table {
	width:100%;
	table-layout:fixed;(列幅を均等にする)
}
.main_table th ,.main_table td {
	font-size:0.7em;
}
.main_table td img {
	width:100%;(画像サイズを列幅に合わせる)
}
スポンサードリンク