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

我什至尝试添加显示 block 、-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 items 将 table-cell 作为它们的显示时，它不会被 block 化 到 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>