有人可以解释这里发生了什么吗? http://jsfiddle.net/BeQmw/2
我有两个表,每个表有两行和两个单元格。每个单元格都有不同的背景颜色,因此您可以看到它们的宽度。两个表之间的唯一区别是第二个表在第二行的第一个单元格中有一个 +
字符。但是当发生这种情况时,包含 +
的列中的单元格会变得更宽。
HTML 这样做有充分的理由吗?有没有办法指定所有单元格具有相同的宽度?
最佳答案
默认情况下,<table>
有table-layout
设置为 auto
.此设置会导致浏览器根据单元格的内容计算表格单元格的布局(即,具有内容的单元格受到的影响与没有内容的单元格不同)。我不确定该算法到底是什么,但是如果您不指定 width=100%
在 <table>
上元素看起来空表格单元格的宽度为 1 或 2 像素,显然乘以表格的整个宽度。当您向第一个表格单元格添加内容时,该值会继续减少,但会随着第二个表格单元格中的内容而增加。
我开门见山地说table-layout: fixed
不依赖于单元格内容并根据指定宽度计算表格单元格的宽度 <col>
s、边框和单元格间距。 ( Specification ) 你可以在实际中看到这个:http://jsfiddle.net/ExplosionPIlls/BeQmw/3/
规范继续讨论 table-layout: auto
并且实际上说:
UAs are not required to implement this algorithm...
因此无法保证表格单元格的特定宽度。
关于html - 向空表格单元格添加文本会更改其宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16661069/