エントリーの編集
エントリーの編集は全ユーザーに共通の機能です。
必ずガイドラインを一読の上ご利用ください。
レスポンシブウェブデザイン案件でtableの見た目を大きく変える
記事へのコメント0件
- 注目コメント
- 新着コメント
このエントリーにコメントしてみましょう。
注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています
- バナー広告なし
- ミュート機能あり
- ダークモード搭載
関連記事
レスポンシブウェブデザイン案件でtableの見た目を大きく変える
大きく変化するようなデザインにしないでください、と思うのですがあるんですよねー、たまに。 というわ... 大きく変化するようなデザインにしないでください、と思うのですがあるんですよねー、たまに。 というわけでここに置いてあります。 640pxよりブラウザサイズが小さくなるとスマホ相当の画面になります。 何が起きているかと言いますと、PCではtheadの見出しセルとtbodyの見出しセルがありマトリックスな感じの表になっています。 それがスマホでは、PCの1行相当にあたる情報が1ブロックとなり、PCではtbodyの見出しセルがブロックの見出しに昇格し、PCのtheadの見出しセルがtbodyの見出しセルになるという感じになっていますね。 さらにcolspanになってる部分がスマホではrowspanのようになっていて鬼畜だなーと思った方もいらっしゃるかもしれません。 他のブログなどのレスポンシブウェブデザインでのテーブルと同じく、メディアクエリを利用してdisplayの値をゴニョゴニョ切りかえてお