表格單元格中的flexbox box-ordinal-group

Question

我試圖使用flexbox和box-ordinal-group（用例：通過移動設備上的媒體查詢而不重複代碼的特定表格的不同順序）重新排列表格單元格。

我一直認爲將表單元格設置爲display: block，並將表格設置爲display: flex（以及各種供應商的前綴版本）可以做到這一點，但沒有這樣的運氣。

我想知道是否tr/tbody圍繞td擺脫flexbox。

<table> 
    <tr> 
     <td class="cell1">Cell 1</td> 
     <td class="cell2">Cell 2</td> 
     <td class="cell3">Cell 3</td> 
    </tr> 
</table> 

 

table { 
    display: -webkit-box; 
    -webkit-flex-direction: column; 
    display: -moz-box; 
    -moz-flex-direction: column; 
    display: -ms-flexbox; 
    -ms-flex-direction: column; 
    display: -webkit-flex; 
    display: flex; 
    flex-direction: column; 
} 

td { 
    display: block; 
} 

.cell1 { 
    -webkit-box-ordinal-group: 3; 
    -moz-box-ordinal-group: 3; 
    -ms-flex-order: 3; 
    -webkit-order: 3; 
    order: 3; 
} 

這裏顯示它在display: table版<div>但不是<table>工作的例子。不幸的是，我不能只使用div的，因爲我有支持IE7 ...

Answer 1

的Flex項目必須是Flex容器的孩子，所以，是的，TD元素是打破你的東西。只需將與表格元素相關聯的樣式切換到tr元素，就可以了。

http://jsfiddle.net/GTL4e/1/

tr { 
    display: -webkit-box; 
    -webkit-flex-direction: column; 
    display: -moz-box; 
    -moz-flex-direction: column; 
    display: -ms-flexbox; 
    -ms-flex-direction: column; 
    display: -webkit-flex; 
    display: flex; 
    flex-direction: column; 
} 

而且，爲了不完全一樣的柔性秩序。訂單屬性開始索引0，而箱序號組屬性開始索引編號爲1.