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

有人能解释一下这里发生了什么吗

我有两张桌子，每一张都有两行和两个单元格。每个单元格都有不同的背景色，因此您可以看到它们的宽度。这两个表之间的唯一区别是，第二个表在第二行的第一个单元格中有一个

+

字符。但是当这种情况发生时，包含

+

的列中的单元格会变得更宽

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

如果有两个单元格，请使用

宽度：50%
这将确保它保持两个单元格之间的比率默认情况下，
将
表格布局设置为
自动
。此设置使浏览器根据单元格的内容计算表格单元格的布局（即，有内容的单元格受影响的程度不同于没有内容的单元格）。我不确定该算法到底是什么，但如果您没有在
元素上指定
宽度=100%
，则空表格单元格的宽度似乎为1或2像素，显然会乘以表格的全宽。当您向第一个表格单元格中添加内容时，该值会继续降低，但随着第二个表格单元格中的内容的增加，该值会增加

我将直截了当地说，
表格布局：fixed
不依赖于单元格内容，并根据指定的宽度、边框和单元格间距计算表格单元格的宽度。（）你可以看到这一点：

该规范接着讨论了
表格布局：auto
，实际上说：

不需要UAs来实现此算法

因此不保证表单元格的特定宽度。
似乎每个单元格中需要相等数量的字符来平衡宽度。否则，您可以在顶部添加一个样式块：td{width:50%；}以将其保持在50%。