Having a bit of trouble with the flex layout. I've put together a FIDDLE project where when resizing the output box, table cells will align one to one beneath each other. It seems to work fine in Chrome and Firefox but not in IE when using table elements tr, td.
You can check out the example here
CSS:
tr {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox !important;
display: -webkit-flex;
display: flex;
-ms-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
td {
display: block;
}
.cell1 {
}
.cell2{
width: 500px;
}
.cell3{
min-width: 300px;
}
HTML:
<h1>real table</h1>
<table>
<tr class="table">
<td class="cell1">Cell 1</td>
<td class="cell2">Cell 2</td>
<td class="cell3">Cell 3</td>
</tr>
</table>
<h1>div "table"</h1>
<div class="table">
<span class="cell1">Cell 1</span>
<span class="cell2">Cell 2</span>
<span class="cell3">Cell 3</span>
</div>
Appreciate any help on this!
Solved: To make it work in IE, you need to set display: block on parent elements like tr and table. That should do the trick!