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

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