IE11 vnorená otázka o flexboxu s nadradenou tabuľkou - html, css, css3, flexbox, internet-explorer-11

Máme scenár so vnoreným flexboxom a ktorého rodičom je tabuľka. Aj keď sa chróm trhis správa tak, ako sa očakávalo, v IE-11 sa flexboxy nezakrývajú.

https://jsfiddle.net/arnabgh/qg5rojc9/3/

Nemôžeme urobiť rozloženie tabuľky: opravené. Existuje nejaký iný lepší spôsob, ako to opraviť?

        <table style="border:1px solid red;width:50%";>
<tr>
<td>
<div class="layout flex">
<div class="con flex">
<label>First name</label>
<div class="field-item"><input /></div>
</div>
<div class="con flex">
<label>Last name</label>
<div class="field-item"><input /></div>
</div>
<div class="con flex">
<label>Address 1</label>
<div class="field-item"><input /></div>
</div>
<div class="con flex">
<label>Address 2</label>
<div class="field-item"><input /></div>
</div>
<div class="con flex">
<label>City</label>
<div class="field-item"><input /></div>
</div>
<div class="con flex">
<label>State</label>
<div class="field-item"><input /></div>
</div>
</div>
</td>
</tr>
</table>

CSS je nasledovný -

* {
box-sizing: border-box;
}



.layout.flex {
display: flex;
flex-flow:row wrap;
width:100%;
}

.con {
width:auto;
display: flex;
flex-direction:column;

}

label {
width: 120px;
}

.field-item {
flex: 1;

}

odpovede:

horizontálne usporiadanie závisí iba od tabuľky "sšírku a šírku stĺpcov, nie obsah buniek, vo vašom príklade má vaša tabuľka iba jeden stĺpec (td). Takže ak chcete použiť rozloženie-tabuľka: fixné musíte definovať viac ako "td" a test len ​​dať im rôzne šírky