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列，并且可以在其中放入弹性物品。

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/

为什么为表列设置flex display会破坏表结构？

1 个答案: