Почему настройка flex display для столбца таблицы нарушает структуру таблицы?

Question

Если 2-й и 3-й столбцы установлены в качестве гибкого элемента в трехколоночной таблице, структура таблицы разрывается, а 3-й столбец скользит ниже 2-го, теряя структуру таблицы.Почему это происходит?

table {
  width: 500px;
  background-color: red;
}

.first {
  width: 100px;
}

.second {
  display:flex;
  background-color:blue;
}

.third {
  display:flex;
  background-color: green;
}

<table>
  <tr>
    <td class="first">asdad<td>
    <td class="second"> asdasd</td>
    <td class="third"> asdads</td>
  </tr>
</table>

Я ожидаю, что у меня будет 3 столбца, и я могу поместить в них изгибаемые элементы.

Answer 1

Вы изменили поведение display: table-cell to display: flex, благодаря этому 2 столбца объединяются в один. Вы можете использовать приведенный ниже фрагмент кода

<table><tr><td class="first">asdad<td><td class="second"><div>asdasd</div></td><td class="third"><div>asdads</div></td></tr></table>


.second > div {display:flex; background-color:blue;}
.third  > div{display:flex;background-color: green;}

https://jsfiddle.net/ulric_469/jtxckL8p/3/