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

現象

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

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

回避策

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

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

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

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

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

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が共存してしまう感じになるので、結果うまくいかなくなるのかな〜と推測した。

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