1

我正在尝试使用 flexbox 和 box-ordinal-group 重新排序表格单元格（用例：通过移动设备上的媒体查询对特定表格进行不同的排序，而无需重复代码）。

我曾认为将表格单元格设置为display: block和表格设置为display: flex（以及各种供应商前缀版本）可以解决问题，但没有这样的运气。

我想知道是否是s周围的tr/打破了弹性盒。tbodytd

<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: tableed<div>但不适用于<table>. 不幸的是，我不能只使用 div，因为我必须支持 IE7 ......

http://jsfiddle.net/GTL4e/

4

1 回答 1

4

Flex 项目必须是 flex 容器的子项，所以是的， td 元素正在为您破坏事物。只需将与 table 元素关联的样式切换到 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;
}

此外，order 与 flex-order 并不完全相同。order 属性从 0 开始索引，而 box-ordinal-group 属性从 1 开始索引。

于 2013-10-02T19:22:09.430 回答