HTML表格作为Flex项目

Question

是否可以将HTML表格表示为弹性项目？

例如：

HTML：

<div id="flex-container">
  <table class="flex-container__table"> 
  </table>

  <table class="flex-container__table"> 
  </table>
</div>

CSS：

.flex-container {
    display: flex;
}
.flex-container__table {
    flex: 0.3;
}

为什么这不起作用？

Answer 1

是的，好吧，显然它是......但效果可能不是你所追求的。

＆＃13;

＆＃13;

table {
  border:1px solid grey;
  border-collapse:separate;
  border-spacing: 2px;
}

td {
  padding: 1em;
  border:1px solid green;
}

.wrap {
  display: flex;
  background: lightblue;
  width: 80%;
  margin: 1em auto;
}

.wrap table {
  flex:1;
  margin: 0 1em;
 background: #bada55;
}

＆＃13;

<div class="wrap">
  <table>
<tr>
  <td></td>
  <td></td>
  <td></td>
</tr>
<tr>
  <td></td>
  <td></td>
  <td></td>
</tr>
<tr>
  <td></td>
  <td></td>
  <td></td>
</tr></table>
  
  <table>
<tr>
  <td></td>
  <td></td>
  <td></td>
</tr>
<tr>
  <td></td>
  <td></td>
  <td></td>
</tr>
<tr>
  <td></td>
  <td></td>
  <td></td>
</tr></table>

</div>

＆＃13;

＆＃13;

＆＃13;

请注意，即使应用了flex:1 *，表格也不会展开以填充剩余空间。

我怀疑要扩展表格，你必须将弯曲扩展到tr/td，这实际上会在一开始就否定表格的位置。

Answer 2

请检查div的CSS选择器。应该是“＃”。