表格的CSS：1个固定宽度列，1个小列，其余列相等

Question

我正在尝试创建一个表，其第一列是固定宽度，其第二列收缩尽可能小以适合其文本，其余列将平均分割所有剩余空间，无论其内容如何。

这是一个小小的演示，我到目前为止的尝试：http://jsfiddle.net/B8LnP/

有关输出的两件事要注意：

1. 我希望堆叠表的列对齐，就像它们是单个表的一部分一样
2. 请注意，问题是我无法让第3列和第4列拆分剩余空间。我已经尝试将.equal类的宽度设置为小值和大值，但都没有达到目标。

小提琴HTML

<table>
    <tr>
        <td class="fixed">fixed</td>
        <td class="small">small_as_possible</td>
        <td class="equal">split remaining</td>
        <td class="equal">equally</td>
    </tr>
</table>

<!-- another instance to make sure the columns align -->

<table>
    <tr>
        <td class="fixed">fixed</td>
        <td class="small">small_as_possible</td>
        <td class="equal">equally</td>
        <td class="equal">split remaining</td>
    </tr>
</table>

CSS

table { width: 95%; margin: 0 auto}
td {border: 1px solid}
.fixed {width: 200px}
.small {width: 1px}
.equal { /* what to put here? */ }

Answer 1

这将为您完成工作：

CSS：

table { width: 95%; margin: 0 auto; table-layout:fixed;}
td {border: 1px solid}
.fixed {width: 200px;}
.small {width: 120px;}
.equal {width: 50%;}

演示： http://jsfiddle.net/B8LnP/1/

• 那么会发生什么？
  请注意table-layout:fixed;。使用width设置table（包含元素的百分比，如您的情况或固定数量），会发生的情况是，首先从表的宽度中扣除固定宽度列，然后表的剩余宽度在剩余的列之间分开，这些列具有百分比宽度或根本没有设置宽度（与auto相同）。

• 此外，如果所有剩下的列（除了宽度固定的列）具有百分比宽度，但总百分比不等于100％，剩余百分比自动分布在固定宽度列中，因此请确保百分比加起来为100％。

Answer 2

你不能用类做，你需要使用colspan属性。