html - 为什么为表格列设置 flex 显示会破坏表格结构？

Question

如果第 2 列和第 3 列设置为 3 列表格中的 flex 元素，则表格结构会中断，并且第 3 列会滑到第 2 列下方，从而失去类似表格的结构。为什么会这样？

table {
  width: 500px;
  background-color: red;
}

.first {
  width: 100px;
}

.second {
  display:flex;
  background-color:blue;
}

.third {
  display:flex;
  background-color: green;
}

<table>
  <tr>
    <td class="first">asdad<td>
    <td class="second"> asdasd</td>
    <td class="third"> asdads</td>
  </tr>
</table>

我希望得到 3 列，并且我可以在其中放置 flex 元素。

Answer 1

您将 display:table-cell 的行为更改为 display:flex，因为这 2 列正在合并为单个列。您可以使用下面的代码片段

<table><tr><td class="first">asdad<td><td class="second"><div>asdasd</div></td><td class="third"><div>asdads</div></td></tr></table>


.second > div {display:flex; background-color:blue;}
.third  > div{display:flex;background-color: green;}

https://jsfiddle.net/ulric_469/jtxckL8p/3/