将柔性包装包裹在tbody IE

Question

Flex wrap在IE 11中的表的tbody中不起作用。我尝试了与其他堆栈溢出帖子不同的建议，但是它们都没有用。

如果您在chrome / firefox / edge中打开此URL，则可以看到flex wrap可以正常工作，但在IE 11中效果不佳 https://liveweave.com/j2yzx0

我也尝试使用this作为参考，但用处不大。

* {
  box-sizing: border-box;
}

table {
  table-layout: fixed;
  width: 100%;
  border: 1px solid black;
}

tr {
  border: 1px solid blue;
  display: flex;
  flex-wrap: wrap;
  margin: 10px 0px;
}

th,
td {
  border: 1px solid red;
  text-align: center;
  flex-basis: 26%;
}

<table>
  <thead>
    <tr>
      <th>Col 1</th>
      <th>Col 2</th>
      <th>Col 3</th>
      <th>Col 4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>R1C1</td>
      <td>R1C2</td>
      <td>R1C3</td>
      <td>R1C4</td>
    </tr>
    <tr>
      <td>R2C1</td>
      <td>R2C2</td>
      <td>R2C3</td>
      <td>R2C4</td>
    </tr>
  </tbody>
</table>

我什至尝试添加显示块，-ms-前缀等，但无济于事 链接到这里：https://liveweave.com/Liylfz

* {
  box-sizing: border-box;
}

table,
tbody,
thead,
td,
th {
  display: block;
}

table {
  border: 1px solid black;
  width: 100%;
}

thead,
tbody {
  display: block;
}

tr {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

th,
td {
  border: 1px solid red;
  text-align: center;
  padding: 5px;
  background-color: #eee;
  width: 50%;
  flex-basis: 50%;
}

<table>
  <thead>
    <tr>
      <th>Col 1</th>
      <th>Col 2</th>
      <th>Col 3</th>
      <th>Col 4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>R1C1</td>
      <td>R1C2</td>
      <td>R1C3</td>
      <td>R1C4</td>
    </tr>
    <tr>
      <td>R2C1</td>
      <td>R2C2</td>
      <td>R2C3</td>
      <td>R2C4</td>
    </tr>
  </tbody>
</table>

Answer 1

在IE11中，当 flex项目以table-cell作为其显示时，它不会被{em> blockified 变成{{1 }}，就像通常在Chrome或Firefox中一样。您可以在此处检查了display: block或th元素之后，通过查看开发人员工具中的计算样式进行验证。

只需在此处将td添加到display: block-请参见下面的演示

th,td

* {
  box-sizing: border-box;
}

table {
  table-layout: fixed;
  width: 100%;
  border: 1px solid black;
}

tr {
  border: 1px solid blue;
  display: flex;
  flex-wrap: wrap;
  margin: 10px 0px;
}

th,
td {
  border: 1px solid red;
  text-align: center;
  flex-basis: 26%;
  display: block; /* ADDED */
}