CSS flex column-reverse 忽略 table 宽度

Question

"table width 100%" 和 "td width xx%" 不适用于 "tbody column-reverse"。线索？

需要每个单元格的固定相对宽度为 100% 宽度 table。

请

CSS。

body { margin:0px; }
table { width:100%; }
tbody { display:flex; flex-direction:column-reverse; background:#222; }
td.x { background-color:#eee; width:10%; }
td.y { background-color:#aaa; width:30%; }
td.z { background-color:#888; width:60%; }

<body>
 <table>
  <tbody>
   <tr><td class="x">ax</td><td class="y">ay</td><td class="z">az</td></tr>
   <tr><td class="x">bxx</td><td class="y">by</td><td class="z">bzz</td></tr>
   <tr><td class="x">cxxx</td><td class="y">cyyy</td><td class="z">czzz</td></tr>
  </tbody>
 </table>
</body>

Answer 1

您可以尝试将 display: block; 添加到 td。x/y/z 但它会像行一样堆叠。 - 编辑 - 所以那没有用，但后来我添加了 display: flex;在 tr 标签中，它有点响应。

body { margin:0px; }
table { width:100%; }
tbody { display:flex; flex-direction:column-reverse; background:#222; }
tr{ display: flex; }
td.x { background-color:#eee; width:10%; display: block; }
td.y { background-color:#aaa; width:30%; display: block; }
td.z { background-color:#888; width:60%; display: block;}

Answer 2

您可以将 display:inline-block; 添加到您 <td> 的

看到这个Fiddle。

更新

这是一个将 display:flex; 设置为您的行的版本，您可以拥有 10%、30% 和 60%，并删除 display:inline-block; 样式。

看到这个Fiddle

CSS flex column-reverse 忽略 table 宽度

CSS flex column-reverse ignores table width

css

flexbox