将文本添加到空表格单元格会更改其宽度

Question

有人可以解释这里发生了什么吗？ http://jsfiddle.net/BeQmw/2

我有两个表，每个表有两行和两个单元格。每个单元格都有不同的背景颜色，因此您可以看到它们的宽度。两个表之间的唯一区别是第二个表在第二行的第一个单元格中有一个+字符。但是当发生这种情况时，包含+的列中的单元格会变得更宽。

为什么HTML会这样做有充分的理由吗？有没有办法指定所有单元格具有相同的宽度？

Answer 1

默认情况下，<table>将table-layout设置为auto。该设置使浏览器基于单元格的内容计算表格单元格的布局（即，具有内容的单元格与不具有内容格式的单元格不同地受影响）。我不确定该算法究竟是什么，但是如果你没有在width=100%元素上指定<table>，那么空表格单元格的宽度为1或2，显然会成倍增加按表的全宽。当您向第一个表格单元格添加内容时，这种情况会继续减少，但会随着第二个表格单元格中的内容而增加。

我将切入追逐，并说table-layout: fixed不依赖于单元格内容，并根据指定的宽度<col>，边框和单元格间距计算表格单元格的宽度。 （Specification）您可以看到这一点：http://jsfiddle.net/ExplosionPIlls/BeQmw/3/

规范继续讨论table-layout: auto并实际上说：

  

UAs不需要实现此算法...

所以没有保证表格单元格的特定宽度。

Answer 2

http://jsfiddle.net/BeQmw/4/如果您有2个单元格，请使用width:50%; 这将确保它保持2个单元格之间的比率