More than 5 years have passed since last update.

スマホ実機でtd{ display:block; }が効かない時

Posted at 2018-12-28

レスポンシブサイトでtableでth, tdを縦並びにしたい時、

@media only screen and (max-width: 768px) {
   table th, table td {
      display: block;
      width: 100%;
   }
}

というのを使うのですが、chromeの開発ツールでは思った通りに表示されるのですが、
実機で確認すると横並びのまま、、、

「なんでかな？」と思ってソースをよく見ると

<!DOCTYPE html>

最初のこれが抜けていた。。。
お粗末なオチ。