display: flex;を使用時、chromeではうまく表示されたのにsafariで崩れてしまう問題がtableを絡めたときに発生したのでその解放をまとめる。
問題
以下のコードのviewの表示が、chromeとsafariで異なっている。
version1は両者とも予想通りの表示（外側のdivの中に、内側の3つのdivが並ぶ）だが、
viesion2のように、内側のdivの1つがtableに置き換わると、safariでtableが外側のdivを超えてしまう。
demo.html
<!--version 1 --><divclass="d-flex w-50"><divclass="bg-danger"style="width: 100px; height: 50px;">
100px
</div><divclass="bg-primary"style="width: 150px; height: 50px;">
150px
</div><divclass="bg-warning"style="width: 100%; height: 50px;">
table無し
</div></div><hr><!--version 2 --><divclass="d-flex w-50"><divclass="bg-danger"style="width: 100px; height: 50px;">
100px
</div><divclass="bg-primary"style="width: 150px; height: 50px;">
150px
</div><tableclass="bg-warning"style="width: 100%; height: 50px;"><tbody><tr><th>
table th
</th><td>
table td
</td></tr></tbody></table></div>chromeでの表示
![image.png]()
safariでの表示
![image.png]()
原因
- 描画されているHTML及び、HTMLタグから自動生成されているCSSに、両者に大きな違いは無い。
- よって
display: table;の扱いが両ブラウザで異なり、chromeはdisplay: block;と同じ扱いをされるが、safariでは異なるのだと思われる。 - 参考：tableタグから生成されているCSS（検証モードで確認）
chrome.css
table{display:table;border-collapse:separate;border-spacing:2px;border-color:grey;}safari.css
table{display:table;border-collapse:separate;-webkit-border-horizontal-spacing:2px;-webkit-border-vertical-spacing:2px;border-top-color:gray;}解決策
tableタグをdivで囲うことで、dispaly: flex;が当てられたその側のdivの中に、3つのdivが並ぶようにする。
demo.html
<divclass="d-flex w-50"><divclass="bg-danger"style="width: 100px; height: 50px;">
100px
</div><divclass="bg-primary"style="width: 150px; height: 50px;">
150px
</div><div><tableclass="bg-warning"style="width: 100%; height: 50px;"><tbody><tr><th>
table th
</th><td>
table td
</td></tr></tbody></table></div></div>これでsafariの表示も問題なし