こんにちは。SaitoKouです。
Webサイトのページ作成時、tableタグを使用して表を作成することはよくありますよね。料金表だったり、人物のプロフィールだったりと、情報を整理して表示するには表形式が見やすいです。
ただ、PCでサイトを表示するときは違和感がなくても、スマホで表示すると画面のサイズが足りずに表の右端が切れてしまうことはよくあります。スマホでも表が見やすくなるように、画面サイズによって表の見え方を調整していくことが重要ですね！
1列テーブルへのレスポンシブ対応
例えばこんな表があったとします。
<!DOCTYPE html>
<html lang="ja">
<head>
<style>
table, th, td {
padding: 0px 20px;
border-collapse: collapse;
text-align: center;
}
th {
border: 1px solid #000000;
background: #e1e1e1;
}
td {
border: 1px solid #000000;
}
</style>
</head>
<body>
<table>
<tbody>
<tr>
<th>
<p>テーブルヘッダ1</p>
</th>
<td>
<p>データ1-1</p>
</td>
<td>
<p>データ1-2</p>
</td>
</tr>
<tr>
<th>
<p>テーブルヘッダ2</p>
</th>
<td>
<p>データ2-1</p>
</td>
<td>
<p>データ2-2</p>
</td>
</tr>
<tr>
<th>
<p>テーブルヘッダ3</p>
</th>
<td>
<p>データ3-1</p>
</td>
<td>
<p>データ3-2</p>
</td>
</tr>
</tbody>
</table>
</body>
PCではこう表示されていても、とくに何も工夫をしなければ、スマホ表示の時にはこうなります。
文字が改行されすぎてて、非常に見にくいですよね。
これを、下の画像のようにします。
CSS
これを実現するには、以下のスタイルを追記します。（style部分を抜粋）
<style>
table, th, td {
padding: 0px 20px;
border-collapse: collapse;
text-align: center;
}
th {
border: 1px solid #000000;
background: #e1e1e1;
}
td {
border: 1px solid #000000;
}
@media screen and (max-width: 400px) {
th, td {
display: block;
width: 100%;
}
}
</style>
th,td各要素をブロック要素にし、幅を100%とします。こうすることで、各セルが一列にタテに並んでくれます！
まとめ
テーブルのレスポンシブ対応はほかにもありますが、まずはこれが最も簡単な方法だと思います。テーブルの幅が長いときはこのように対応して、スマホでもきれいに見えるよう調整しましょう！
みなさまのホームページやイメージがよくなるお手伝いをいたします。
ヘッダー画像、バナー画像、ロゴ、WordPressデザインなどお気軽にご相談ください！
WordPressデザインサービスは以下から承っております。
