スマホで表が見切れてしまうときの対処法
ホームページで表を使うと文章などが読み手にきれいに見え、読みさすくなるので便利に使っている人も多いと思います。
とても便利な表ですが、 デバイスが多様になるにつれ、ホームページを見る側の画面サイズが変わるようになりました。
それに伴いデバイスによって表が見切れてしまうことがあります。
今までのパソコンサイトのように普通に表を作ってしまうとこんな感じに右が見切れてしまう場合があります。
スマホ用サイトでもくずれない表（テーブル）の実装方法について確認していこうと思います。
表が崩れる原因
表のレイアウトが崩れてしまう原因はいろいろありますが、大別すると主に2種類あります。
１．表のカラム（列）数が多い場合
２．表の幅が使用デバイスの画面より大きく指定されている場合
１．の解決方法
テーブルのカラム（列）数が多い場合
以下のように、HTMLファイルに記述します。
＜HTMLサンプル＞
<table style="border-style: none;" border="1">
<tbody>
<tr>
<th>見出し １</th>
<td>データ 1-1</td>
<td>データ 1-2</td>
<td>データ 1-3</td>
</tr>
<tr>
<th>見出し ２</th>
<td>データ 2-1</td>
<td>データ 2-2</td>
<td>データ 2-3</td>
</tr>
<tr>
<th>見出し ３</th>
<td>データ 3-1</td>
<td>データ 3-2</td>
<td>データ 3-3</td>
</tr>
</tbody>
</table>
| 見出し １ | データ 1-1 | データ 1-2 | データ 1-3 |
|---|---|---|---|
| 見出し ２ | データ 2-1 | データ 2-2 | データ 2-3 |
| 見出し ３ | データ 3-1 | データ 3-2 | データ 3-3 |
表をタグで普通に記入するとこうなります。
スマホで見ても崩れないようにCSSを記述していきます。
＜CSS記述＞
th,td {
width: 100%;
display: block;
}
thとtdの幅を100%に、そして、ブロックレベル表示になるように指定します。
こうすることにより4カラム（列）の表が1カラム（列）の表になりました。
＜解説＞
項目名と項目が2カラム（列）以上で構成されているテーブルの場合、
1カラム表示に変更することでデザイン崩れを防ぎきれいに読むことができるようになります。
ただし表の上と左に項目がある場合の表ではこれはうまくいきません。
下のやり方のほうで設定すると、上と左に項目のある場合きれいに見えます。
２．の解決方法
テーブルの幅が使用デバイスの画面より大きく指定されている場合
カラム数が少ない場合には、幅のpx（ピクセル）指定を%（パーセント）指定にすることで対応できます。
以下のように、HTMLファイルに記述します。
＜HTMLサンプル＞
<table style="border-style: none;" border="1">
<tbody>
<tr>
<th>見出し １</th>
<td>データ 1-1</td>
</tr>
<tr>
<th>見出し ２</th>
<td>データ 2-1</td>
</tr>
<tr>
<th>見出し ３</th>
<td>データ 3-1</td>
</tr>
</tbody>
</table>
| 見出し １ | データセル 1-1 |
|---|---|
| 見出し ２ | データセル 2-1 |
| 見出し ３ | データセル 3-1 |
表の幅を「％」で指定するCSSを記述します。
＜CSS記述＞
table {
width:100%;
}
th,td {
width:50%;
こうすることによりデバイスの画面に合わせて表示されるようになります。
「％」で設定する方法はカラム数が多すぎたり、記入内容が多く表がもともと大きい場合などは、表示が小さくなりすぎて読みにくくなることがありますので、１．の表を1カラム表示に表示する方法の方がいいです。
最後に
最近はパソコンが横長でスマホが縦長なので、表を使ってホームページを作ると前述のように見栄えが悪くなる場合が多くなり、表の仕様は減ってきました。しかし、横に羅列するより、明らかに読みやすくなる場合はまだまだ表は活躍すると思われます。しかし、難しく考えていくとデバイスによって見にくくなることがあるので、あまり深く考えず、シンプルに作ることを心掛けるといいと思います。
コメント