具有固定宽度和扩展列的复杂表格布局

Question

我有一个复杂的表格布局（jsfiddle）。这是一个包含许多部分的长报告，每个部分都有一个表格。

表格的前两列应该有一个固定的宽度，以确保它们很好地对齐。

第三列应该增长以适应其中的文本而不包装（它总是一个单词）。

最后一列应该始终填充剩余的空间。

当我只指定前两列的宽度并给最后一列100％宽度时，最后一列填充可用空间（好），但忽略前两列的宽度。

当我给表table-layout: fixed;时，前两列的宽度有效，但最后两列占用相同的屏幕空间，因为我不能给第三列固定宽度。

有解决方法吗？

注意：解决方案不需要在IE上运行！ FF 12+和Chome 21+就足够了。

Answer 1

使用（例如'100％'）指定常规表。然后，您只需指定前两列的宽度。因此，另外两个表现得像预期的那样。

Here is the fixed fiddle.

简而言之：

• 删除td.type { width: 100%; }​
• 将width:0.1em;添加到td.name