テクニック

スマホで td{display:block} が効かない?!

レスポンシブ用に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>
 

入れ忘れていました。

はい、これで解決!

盲点!!!笑

ABOUT ME
mami
mami
デザイン歴15年、ネット歴20年のアニメ・ゲーム大好き。 趣味はダンス・お酒と振り幅全開で生きるデザイナー。現在はフリーランスで、グラフィックデザイナー/WEBデザイナー/フロントエンドエンジニアとして活動中。