レスポンシブウェブデザイン案件でtableの見た目を大きく変える

大きく変化するようなデザインにしないでください、と思うのですがあるんですよねー、たまに。 というわけでここに置いてあります。 640pxよりブラウザサイズが小さくなるとスマホ相当の画面になります。 何が起きているかと言いますと、PCではtheadの見出しセルとtbodyの見出しセルがありマトリックスな感じの表になっています。 それがスマホでは、PCの1行相当にあたる情報が1ブロックとなり、PCではtbodyの見出しセルがブロックの見出しに昇格し、PCのtheadの見出しセルがtbodyの見出しセルになるという感じになっていますね。 さらにcolspanになってる部分がスマホではrowspanのようになっていて鬼畜だなーと思った方もいらっしゃるかもしれません。 他のブログなどのレスポンシブウェブデザインでのテーブルと同じく、メディアクエリを利用してdisplayの値をゴニョゴニョ切りかえてお

[i_mairy]

テーブルをレスポンシブ対応に！