时间戳

首页 > 解决方案 > Flex wrap within tbody IE

html - Flex wrap within tbody IE

问题描述

Flex wrap is not working within tbody of a table in IE 11. I tried different suggestions from other stack overflow posts but none of them were useful.

If you open this URL in chrome/firefox/edge you can see flex wrap working fine but in IE 11 or so it doesn't https://liveweave.com/j2yzx0

I tried using this as reference too but not of much use.

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

I even tried adding display block, -ms- prefix etc but to no avail Link here: 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>

标签： htmlcssinternet-explorerflexbox

解决方案

在 IE11 中，当flex项目作为table-cell它们的display时，它不会像在 Chrome 或 Firefox 中那样被阻止。display: block您可以通过在此处检查or元素后查看开发人员工具中的计算样式来验证这一点。thtd

只需添加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>

推荐阅读