safariでtableを含んだ表示が崩れる問題の解消

display: flex;を使用時、chromeではうまく表示されたのにsafariで崩れてしまう問題がtableを絡めたときに発生したのでその解放をまとめる。

問題

以下のコードのviewの表示が、chromeとsafariで異なっている。
version1は両者とも予想通りの表示（外側のdivの中に、内側の3つのdivが並ぶ）だが、
viesion2のように、内側のdivの1つがtableに置き換わると、safariでtableが外側のdivを超えてしまう。

demo.html

<!--version 1 -->
<div class="d-flex w-50">
  <div class="bg-danger" style="width: 100px; height: 50px;">
    100px
  </div>
  <div class="bg-primary" style="width: 150px; height: 50px;">
    150px
  </div>
  <div class="bg-warning" style="width: 100%; height: 50px;">
    table無し
  </div>
</div>
<hr>

<!--version 2 -->
<div class="d-flex w-50">
  <div class="bg-danger" style="width: 100px; height: 50px;">
    100px
  </div>
  <div class="bg-primary" style="width: 150px; height: 50px;">
    150px
  </div>
  <table class="bg-warning" style="width: 100%; height: 50px;">
    <tbody>
      <tr>
        <th>
          table th
        </th>
        <td>
          table td
        </td>
      </tr>
    </tbody>
  </table>
</div>

• chromeでの表示
  

• safariでの表示
  

原因

• 描画されている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

<div class="d-flex w-50">
  <div class="bg-danger" style="width: 100px; height: 50px;">
    100px
  </div>
  <div class="bg-primary" style="width: 150px; height: 50px;">
    150px
  </div>
  <div>
    <table class="bg-warning" style="width: 100%; height: 50px;">
      <tbody>
      <tr>
        <th>
          table th
        </th>
        <td>
          table td
        </td>
      </tr>
      </tbody>
    </table>
  </div>
</div>

これでsafariの表示も問題なし

==============
僕が創業した株式会社Flamersでは、長期インターン口コミサイトVoilを作っています。
学生の方はぜひ御覧ください！
https://voil-intern.com/