スマホ版の表リストをどうかにしたい！
2023年4月17日
4月に半ばになり、桜がもう若葉に入れ替えてきましたね。
外の気温もだんだんと上昇してきましたね…
外に出かけるとほぼマスクをしてる人が多いんですね…
でも、外で外出するときはほぼマスクしていない人が何人か見かけるようになりました。
みんなが、マスクを脱却する日は数年後になるんじゃないかね？
さてと、話題に入りましょう！
スマホ版の表リストをどうかにしたい！
ある業者がWebページを作成した後に、なぜかトラブルでこっちに低価格でページレイアウトを変えてほしいという依頼がたまにあります！
スマホ版で閲覧すると窮屈の表リストが表示されているときがたまに見かけます。
PC版ではきれいな表リストを作っていただいてるのに、スマホ版になると、窮屈のレイアウトに…
それって困るんですよね…
2列までならまだましかもしれませんが…
3列、4列…
列数が増えると…
スマホ版で閲覧すると表リストが窮屈に変身してしまいます…
スマホ版でゆとりのある見やすさにデザインをする方法を伝授します。
<table>
<thead>
<tr>
<th>項目1</th>
<th>項目2</th>
<th>項目3</th>
<th>項目4</th>
</tr>
</thead>
<tbody>
<tr>
<td>タイトル1</td>
<td>テキスト</td>
<td>テキストテキスト</td>
<td>テキストテキストテキスト</td>
</tr>
<tr>
<td>タイトル2</td>
<td>テキストテキスト</td>
<td>テキストテキストテキスト</td>
<td>テキストテキストテキストテキスト</td>
</tr>
<tr>
<td>タイトル3</td>
<td>テキスト</td>
<td>テキストテキストテキストテキスト</td>
<td>テキストテキストテキスト</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4">※注脚テキスト注脚テキスト注脚テキスト注脚テキスト</td>
</tr>
</tfoot>
</table>これはいつも通りの表リストを作成します。
次は、CSSをコーディングしておきましょう！
※ここはリセットスタイルを継承したときのCSSをそのまま使います。
table{
border:1px solid #666;
margin:0 auto;
padding:0;
width:100%;
}
table th,
table td{
padding:10px;
vertical-align:top;
}ここまでは、PC版の表示ではきれいに表示されてますね。
では、スマホ版では何を記述したらよいでしょうか？
一日考えて試行錯誤してみてくださいね！
では、また！
- Leonardo
- 無事に関空到着！ 2024年10月5日
- 大きな飛行機の揺れ… 2024年10月4日
- そろそろ搭乗準備へ！ 2024年10月3日
- レンタカー返却から石垣空港へ！ 2024年10月2日
- ユーグレナモールで散策… 2024年10月1日