Question

＆＃34;表格宽度100％＆＃34;和＆＃34; td width xx％＆＃34;没有使用＆＃34; tbody column-reverse＆＃34;。线索？

需要在100％宽度表中修复每个单元格的相对宽度。

仅限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忽略表格宽度

2 个答案: