html表格宽度与百分比

Question

我有一个问题。 我正在测试一张桌子。这将最终与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, and 22（也可以加起来为100％），整个表格的大小实际上会缩小，而不仅仅是中间部分。 是否有理由这样做？

Answer 1

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

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

最右边一栏中的文字是最宽的。当您使前两个单元格的相对宽度与最右侧相比较小时，整个表格会缩小，而最右边的单元格保持相同的大小。

Answer 2

由于3.列文字：“ Sergeant McAngryFace ”

这条2行的文字想要1行，从20 60 20变为22 56 22。

或者在没有空间 的情况下使用非破坏空间并且所有将使用1行

尝试改变：

"Sergeant McAngryFace" to
"Sergeant McAngryFace"

Answer 3

除非有您不想要的原因，为什么不将表格宽度设置为100％？如：

<table id="UndergradTable" style="width:100%">

JSFiddle