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

发布时间：2020-12-14 23:22:00 所属栏目：资源来源：网络整理

导读：有人能解释一下这里发生了什么吗？ http://jsfiddle.net/BeQmw/2 我有两个表,每个表有两行和两个单元格.每个单元格都有不同的背景颜色,因此您可以看到它们的宽度.两个表之间的唯一区别是第二个表在第二行的第一个单元格中有一个字符.但是当发生这种情况时,包

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

我有两个表,每个表有两行和两个单元格.每个单元格都有不同的背景颜色,因此您可以看到它们的宽度.两个表之间的唯一区别是第二个表在第二行的第一个单元格中有一个字符.但是当发生这种情况时,包含该列的细胞变得更宽.

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

解决方法

默认情况下,< table>将表格布局设置为auto.该设置使浏览器基于单元格的内容计算表格单元格的布局(即,具有内容的单元格与不具有内容格式的单元格不同地受影响).我不确定该算法究竟是什么,但是如果你没有在< table>上指定width = 100％.元素看起来空表格单元格的1或2像素宽度显然会乘以表格的整个宽度.当您向第一个表格单元格添加内容时,这会继续减少,但随着内容在第二个表格单元格中的增加而增加.

我将切入追逐并说表格布局：固定不依赖于单元格内容并根据指定的宽度< col> s,边框和单元格间距计算表格单元格的宽度. (Specification)你可以看到这个在行动：http://jsfiddle.net/ExplosionPIlls/BeQmw/3/

规范继续谈论表格布局：auto并且实际上说：

UAs are not required to implement this algorithm…

所以没有保证表格单元格的特定宽度.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!