为什么电脑上正常的结果到手机上失败？

Question

写了一个手机端布局，我在电脑调试的时候是正常的

但是切换成手机访问就出错，如上图，请问是为什么呢?
布局我是用的是table，结构和样式如下。

还有，我想请问下为什么DOM结构在手机上不显示失败，如下图？

Answer 1

flex 生效范围基于副属性，你是在.cards上设置flex，作用范围是是在于table这个层级上，而不会到tr,td层级范围去。
pc端会生效是因为你设置了cellspacing="19px"，下面td单元格间距则为19px;并不是flex属性在生效;
移动端下td未设置其宽度，导致宽度默认占据了100%。

Answer 2

jsrun 一下？搞个在线的试试。感觉是 table 没撑开。

不太像兼容性问题。

可以排查一下容器的大小，看看是不是容器不够大。