tbody IE 中的 Flex 换行

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 作为它们的显示 时，它不会像它那样blockified 到display: block通常在 Chrome 或 Firefox 中运行。在此处检查 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 */
}

<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>