表格的 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;。有了这个和table 上的width 设置（在你的情况下包含元素的百分比或固定数量），发生的情况是首先从表格的宽度中扣除固定宽度的列，然后是其余的表格的剩余宽度被拆分为具有百分比宽度或根本没有设置宽度的剩余列（与自动相同）。

• 此外，如果 所有 其余列（除了具有固定宽度的列）具有百分比宽度，但百分比总和不等于 100%，则剩余的百分比会自动分布在固定宽度的列中，因此请确保百分比之和为 100%。

Answer 2

你不能用类来做到这一点，你需要用colspan属性来做到这一点。