レスポンシブ用にtableのtdにdisplay:blockしたのに…
恥ずかしながら、陥りました…
普段は<li>をよく使うのですが、やはりtableタグを使いたいことも出てきます。
基本的な<table>の書き方
HTML
<body>
<table>
<tr>
<th>タイトル</th>
<td>内容</td>
</tr>
</table>
</body>普通に縦に2列、横に1列のテーブルが完成。
パソコンでの表示は問題なくてもスマホ表示の場合、
特に、tableタグ内に文字や画像を入れている時などは、
表示が小さく見づらくなってしまうことがあります。
そこで、PC表示では横に2列、SP表示では縦1列表示にしたい。
そのような場合には、メディアクエリを使用してtdにdisplay:blockをつけます。
スマホでの表示を変える
CSS
@media screen and (min-width:640px){
table th, table td{ display:block; }
}これで、画面サイズが640px以下になった時にtdタグが縦に並びます。
画面いっぱいにしたい場合は以下
CSS
@media screen and (min-width:640px){
table th, table td{
display:block; width:100%;
}
}これでthもtdもスマホ画面横いっぱいに広がります。
基本的なテーブルタグについてはここまででいいかと思うのですが、
私はダメだった….
なんでだ？？？？
と、散々レスポンシブサイトを作ってきただろう！
どうした私！
どこが違うんだ？？
となりましたが、単純なことでした。
HTMLのファイルに
<!DOCTYPE html>入れ忘れていました。
はい、これで解決！
盲点！！！笑
