向空表格单元格添加文本会更改其宽度。

Question

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

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

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

- J-bob

---

看起来你需要在每个单元格中使用相同数量的字符来平衡宽度。否则，你可以在顶部添加一个样式块：<style>td {width:50%;}</style> 来保持它在50%。 - prograhammer

Answer 1

默认情况下，<table> 的 table-layout 属性被设置为 auto。这会导致浏览器根据单元格内容计算表格单元格的布局（即具有内容的单元格与没有内容的单元格受到不同的影响）。我不确定确切的算法是什么，但如果您在 <table> 元素上不指定 width=100%，则似乎空表格单元格具有 1 或 2 像素的宽度，这些像素宽度将乘以表格的全宽度。随着您向第一个表格单元格添加内容，此宽度将继续减小，但随着第二个单元格中的内容增加而增加。

直接说吧，table-layout: fixed 不依赖于单元格内容，并基于指定的宽度 <col>、边框和单元格间距来计算表格单元格的宽度。（规范）您可以在以下链接中查看其效果：http://jsfiddle.net/ExplosionPIlls/BeQmw/3/ 规范还谈到了 table-layout: auto，并实际上说：

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

因此，不保证表格单元格的具体宽度。

- Explosion Pills

Answer 2

http://jsfiddle.net/BeQmw/4/ 如果你有两个单元格，请使用 width:50%;，这将确保它们之间的比例保持不变。

- Zera42