tableタグの中でflex-boxを使うとborderが重なるのを回避する

現象

flexクラスがついたtdの中身を上下中央の横並べにしようとすると、flexクラスがついたtdのみborderが太くなる

See the Pen table by kena-nk (@kena-nk) on CodePen.

回避策

① tdの中にdivタグを入れて、そこにflexクラスを当てると回避できる

index.html

<table>
    <tr>
        <td>aaa</td>
        <td>
          <div class="flex">
            <span class="badge">new</span>
            <div>
              <span>aaa</span>
            </div>
          </div>
        </td>
        <td>aaa</td>
    </tr>
    ...省略
</table>

② div要素をインライン要素にして回避する

index.html

<table>
    <tr>
        <td>aaa</td>
        <td>
            <span class="badge">new</span>
            <div style="display: inline">
              <span>aaa</span>
            </div>
        </td>
        <td>aaa</td>
    </tr>
   ...省略
</table>

③ 要素を指定する系で解決する

style.css

table > td > div:nth-of-type(2) {
   display: inline;
}

↑のnth-of-type(2)はdivの2つ目という指定ではなく、表の左から2列目を指している。

なぜtdタグにdisplay:flexを当てるとうまくいかなくなるのか(推測)

tdタグはdisplay: table-cellと同じ役割を担っている。

なので、tdタグにdisplay: flexを当ててしまうと、同じテーブル内にdisplay: table-cellとdisplay: flexが共存してしまう感じになるので、結果うまくいかなくなるのかな〜と推測した。

なぜ共存するとおかしくなってしまうのか厳密には分からないので誰か知ってる人いたら教えて欲しい・・・！

追記 (2021/01/12)

@nagtkk さんにコメントをいただきました！

tdにdisplay: flexを当てるとdisplay: table-cellが自動生成されてしまい、その下にdisplay: flexがくるためborder-collapse: collapseが効かなくなり2重になって見えるようです！

参考：https://www.w3.org/TR/CSS2/tables.html#anonymous-boxes