【问题标题】:Adding text to an empty table cell changes its width向空表格单元格添加文本会更改其宽度
【发布时间】:2013-05-21 10:19:28
【问题描述】:

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

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

HTML 这样做有充分的理由吗?有没有办法指定所有单元格具有相同的宽度?

【问题讨论】:

  • 看来您需要在每个单元格中使用相等数量的字符来平衡宽度。否则,您可以在顶部添加一个样式块: 将其保持在 50%。

标签: html html-table


【解决方案1】:

默认情况下,<table>table-layout 设置为 auto。此设置导致浏览器根据单元格的内容计算表格单元格的布局(即,有内容的单元格与没有内容的单元格受到的影响不同)。我不确定该算法到底是什么,但如果您没有在 <table> 元素上指定 width=100% ,则空表格单元格的宽度似乎为 1 或 2 像素,显然乘以全宽的表。随着您向第一个表格单元格添加内容,该值会继续减少,但会随着第二个表格单元格中的内容而增加。

我会切入正题,说table-layout: fixed 不依赖于单元格内容,而是根据指定的宽度<col>s、边框和单元格间距来计算表格单元格的宽度。 (Specification) 你可以看到这个:http://jsfiddle.net/ExplosionPIlls/BeQmw/3/

规范继续谈论table-layout: auto,实际上说:

UA不需要实现这个算法...

因此不保证表格单元格的特定宽度。

【讨论】:

    【解决方案2】:

    http://jsfiddle.net/BeQmw/4/ 如果您有 2 个单元格,请使用 width:50%; 这将确保它保持两个单元格之间的比例

    【讨论】:

      猜你喜欢
      • 2017-10-06
      • 2015-05-04
      • 2017-06-19
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2014-08-23
      • 1970-01-01
      相关资源
      最近更新 更多