鶏口牛後な日々

心の赴くまま、やりたいことを仕事に。

レスポンシブ対応でテーブルを縦並びに変更していたら実機確認で描画が崩れて結構ビビった

レスポンシブ対応で、テーブルのthとtrにdisplay: blockをスマホだけかけて、縦並びにするというのをやりました。

Chromeデベロッパーツール で問題なく縦並びになっていたのですが、本番にアップされて実機確認したら、縦並びになってない!

ということでちょっとビビって調査して、解決したので覚書。

結論は、DOCTYPE宣言がなかった、ということでした!

そんだけかい!!!

CSS - tableのth、tdをスマホ時に縦並びにしたい|teratail

css - Display:Block not working in Chrome or Safari - Stack Overflow

<!DOCTYPE html>って何なの?? - Qiita

DOCTYPE宣言にそんな意味があったとは・・・

大変勉強になりました!