Сгибание в тэе IE

Question

Flex wrap не работает в tbody таблицы в IE 11. Я попробовал другие предложения из других публикаций переполнения стека, но ни одна из них не была полезна.

Если вы открываете этот URL в chrome / firefox/ edge вы можете видеть, что 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, когда изгибаемые элементы имеют table-cell в качестве отображения , он не получает заблокированный до 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>