Why aren't HTML table rows sorting with Flexbox?
This code does not change the display order of the lines to c
, b
, a
if desired. Changing table
both tr
to div
(and removing td
s) does work. Does anyone know why, or a way to store HTML semantic tables and sort using flexbox?
#results { display: flex; }
#rowa { order: 3; }
#rowb { order: 2; }
#rowc { order: 1; }
<table id="results">
<tr id="rowa"><td>a</td></tr>
<tr id="rowb"><td>b</td></tr>
<tr id="rowc"><td>c</td></tr>
</table>
source to share
It won't work if there is a between table
and , which you either add or add as anonymous.tr
tbody
So, in this case it is not tr
, that becomes flexible member tbody
.
Add tbody
to your rule and it will work
#results tbody { display: flex; }
#rowa { order: 3; }
#rowb { order: 2; }
#rowc { order: 1; }
<table id="results">
<tr id="rowa"><td>a</td></tr>
<tr id="rowb"><td>b</td></tr>
<tr id="rowc"><td>c</td></tr>
</table>
Update
Based on what table
would lay out the vertical with this, and for this with Flexbox we need to addflex-direction: column
#results tbody { display: flex; flex-direction: column; }
#rowa { order: 3; }
#rowb { order: 2; }
#rowc { order: 1; }
<table id="results">
<tr id="rowa"><td>a</td></tr>
<tr id="rowb"><td>b</td></tr>
<tr id="rowc"><td>c</td></tr>
</table>
source to share