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

标签 html html-table

有人可以解释这里发生了什么吗? 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/

相关文章:

jquery - 表格行突出显示

php - 对来自 MySQL 的数据进行排序并将其插入到 HTML 表中

html - 通过 css 选定的 li 上的背景图像

javascript - 按下按钮递增数据然后推送到多维数组

javascript - div after nav 当动画进入 View 时,div 会淡出一半的导航

表格单元格中的 HTML/css 文本不缩进

html - zen 编码 - css 语法/样式属性

jquery - contenteditable 无法在 IE 10 中工作

javascript - 使表格行可点击链接,但让 TD 中的链接仍然有效

javascript - 在 Javascript 中使用 .js 文件生成格式表