html - 强制固定宽度表格的单元格具有精确定义的宽度

Question

基本上我有一个 <table>占据屏幕的整个可用宽度。有时我可能有很多单元格，因此为每个 <col> 提供了一个基本宽度很有帮助，以确保它不会被严重截断。

无论如何，我也有一个复选框作为第一列。我一直希望它的宽度为 31 像素(恰好是 31 像素)。如果其余的单元格不采用它们的精确宽度，我没关系，但是根据指定的宽度，比如可用空间的百分比，它现在似乎在内部做的事情。

问题是，如果 <table>占据屏幕的整个宽度(我需要它占据屏幕的整个宽度)，我碰巧有几个列(比如说 4 列)都具有定义的宽度，复选框列会更长:

这是 fiddle :http://jsfiddle.net/7wwp53aw/2/

我还在 fiddle 中包含了所需的表格外观。

Answer 1

您需要至少允许其中一列没有宽度。
如果它们都定义了宽度，那么它将用作整个表格的比例来使用..

<colgroup>
    <col style="width: 31px;">
    <col>
    <col style="width: 100px;">
    <col style="width: 100px;">
</colgroup>

或者你可以只保留一个，这样它们就可以根据内容自动调整宽度..

<colgroup>
    <col style="width: 31px;">
    <col>
    <col>
    <col>
</colgroup>

演示在 http://jsfiddle.net/gaby/7wwp53aw/8/