带有百分比的 html 表格宽度

Question

我有一个问题。我正在测试一张 table 。这最终将与 ASP.net 一起使用，但现在我只是使用 JSFiddle 来完成样式和所有工作。但我遇到了一些莫名其妙的事情(至少对我而言)。

Here is my fiddle

所以我正在设置我的列的宽度，我等于 100%:

<table id="UndergradTable">
    <col style="width:20%"/>
    <col style="width:60%"/>
    <col style="width:20%"/>
    <thread>
    .... 
</table>

如果我将数字更改为 22、56 和 22(它们加起来也是 100%)，整个表格实际上会缩小，而不仅仅是中间部分。为什么会发生这种情况？

Answer 1

当表格为 width: auto 时，每个单元格都尽可能窄，同时仍然足够宽以:

• 支持CSS中的宽度限制
• 保存单元格的所有内容
• 不会导致表格水平溢出其容器

最右边列中的文本最宽。当您使前两个单元格的相对宽度小于最右边的单元格时，整个表格会缩小，而最右边的单元格保持相同大小。