空单元的固定宽度为0?

时间:2012-03-12 14:58:39

标签: html css tablelayout

我有一个有5列的表,其中2列有一个设置宽度,另外三列没有。不同的浏览器不一致地解释这个。

在不同浏览器中查看this fiddle,了解我的意思。

Firefox和IE9以我认为正确的方式呈现它:所有单元格的均匀宽度为20%(两个的设置宽度均为20%,其余60%​​在剩余的三个单元格之间划分)。 / p>

Chrome,Opera,IE7和IE8强制没有设置宽度的空单元格具有零宽度,这反过来又迫使其他两个单元格各自拉伸到50%宽度。将内容放入三个空单元格之一使得它们占用所有可用宽度(如果一个单元格具有内容,则为60%,如果为两个,则为30%,等等)。同样,从具有设置宽度的两个单元格之一中删除内容会导致强制0宽度。

哪些浏览器做得对,哪些浏览器做错了?

另外,我仔细阅读了关于表格的W3C规范,但只找到description of the empty-cells property,它应该控制带有边框/背景的空单元格的渲染,但这不会影响单元格的宽度。我认为table-layout property可以解决这个问题,但是在Chrome中设置table-layout:fixed确实会显示所有列时,没有办法(或者至少我看不到一个)在Firefox浏览器。如果你能详细说明这个和/或指出W3C规范的正确部分,我真的很感激。

3 个答案:

答案 0 :(得分:1)

问题出现了,因为W3C似乎还没有覆盖它,他们没有提出任何“正确”的方式来处理这种情况。浏览器可以按照自己的方式自由解释,我认为是IE9和Firefox的方式。

答案 1 :(得分:0)

恕我直言,所有浏览器都显示正确的东西。作为开发人员,我们应该了解我们对空单元的期望。定义宽度或添加一些空格总是更好,即使您的单元格将为空以在所有浏览器中实现一致的显示。

答案 2 :(得分:0)

&nbsp;放入“空”<td>