有人可以解释这里发生了什么吗?http://jsfiddle.net/BeQmw/2
我有两个表,每个表有两行和两个单元格。每个单元格都有不同的背景颜色,因此您可以看到它们的宽度。这两个表之间的唯一区别是第二个表+
在第二行的第一个单元格中有一个字符。但是当这种情况发生时,包含 的列中的单元格会+
变得更宽。
HTML为什么这样做有充分的理由吗?有没有办法指定所有单元格具有相同的宽度?
有人可以解释这里发生了什么吗?http://jsfiddle.net/BeQmw/2
我有两个表,每个表有两行和两个单元格。每个单元格都有不同的背景颜色,因此您可以看到它们的宽度。这两个表之间的唯一区别是第二个表+
在第二行的第一个单元格中有一个字符。但是当这种情况发生时,包含 的列中的单元格会+
变得更宽。
HTML为什么这样做有充分的理由吗?有没有办法指定所有单元格具有相同的宽度?
默认情况下,<table>
已table-layout
设置为auto
。此设置使浏览器根据单元格的内容计算表格单元格的布局(即,有内容的单元格与没有内容的单元格受到的影响不同)。我不确定该算法到底是什么,但如果您没有width=100%
在<table>
元素上指定 ,则空表格单元格的宽度似乎为 1 或 2 像素,显然乘以表格的全宽。当您向第一个表格单元格添加内容时,这会继续减少,但会随着第二个表格单元格中的内容而增加。
我会切入正题,说它table-layout: fixed
不依赖于单元格内容,并根据指定<col>
的宽度、边框和单元格间距计算表格单元格的宽度。(规范)你可以看到这一点:http: //jsfiddle.net/ExplosionPIlls/BeQmw/3/
该规范继续谈论table-layout: auto
并实际上说:
UA不需要实现这个算法......
因此不能保证表格单元格的特定宽度。
http://jsfiddle.net/BeQmw/4/如果您有 2 个单元格,请使用width:50%;
这将确保它保持 2 个单元格之间的比例