向空表格单元添加文字会改变其宽度

Question

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

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

是否有一个很好的理由为什么HTML做到这一点？有没有办法指定所有的单元格具有相同的宽度？

如果你有2个细胞

Answer 1

默认情况下之间的比率，<table>有table-layout设置为auto。此设置会导致浏览器根据单元格的内容计算表格单元格的布局（即，包含内容的单元格会受到不同于没有单元格的单元格的影响）。我不确定到底是什么算法，但是如果你没有在<table>元素上指定width=100%，看起来空白表格单元格有1或2个像素宽度，显然会乘以表格的整个宽度。随着向第一个表格单元格添加内容，这种情况会持续下降，但随着第二个表格内容的增加，它会不断增加

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

该规范接着谈table-layout: auto居然说：

实现这一算法的UA不需要......

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

Answer 2

http://jsfiddle.net/BeQmw/4/，使用width:50%; ，这将确保它保持2个细胞