【问题标题】:TD height not being applied in FirefoxTD 高度未在 Firefox 中应用
【发布时间】:2017-01-02 02:14:44
【问题描述】:

我试图弄清楚为什么我的表格单元格没有显示在我指定的高度:

<html>

<head>

</head>

<body>
<table style="border: 1px solid black; border-radius: 10px; padding: 0px;padding-top: 6px; margin: 0px;" align="left" bgcolor="#FFFFFF" border="1" cellpadding="0" cellspacing="0" height="842" width="595">
<tbody>
<tr><td height="100">Test</td></tr>
<tr><td height="100">Test</td></tr>
</tbody>
</table>
</body>

</html>

在我的浏览器 (Firefox) 上,此页面显示为每个单元格占据表格高度的 50%(覆盖整个表格),而不是每个单元格指定的 100 像素。我已经尝试了所有组合,设置了 tr 高度(实际上不存在)和我发布的 td 高度。

我需要避免使用 CSS,因为我正在为电子邮件生成 HTML,而电子邮件客户端对 CSS 的容忍度不是很高。我希望尽可能使用 HTML 标记属性设置我的表格。

编辑

现在我真的很困惑。即使用 CSS 设置高度也不起作用:

<table style="border: 1px solid black; border-radius: 10px; padding: 0px;padding-top: 6px; margin: 0px;" align="left" bgcolor="#FFFFFF" border="1" cellpadding="0" cellspacing="0" height="842" width="595">
<tbody>
<tr><td style="height: 100px;">Test</td></tr>
<tr><td style="height: 100px;">Test</td></tr>
</tbody>
</table>

编辑

有人在 cmets 中发布了一个 JSFiddle 说它有效。但这是我的浏览器(Firefox)上那个小提琴的截图:

我想现在的问题是为什么我不能在 Firefox 上设置行高?

【问题讨论】:

  • tr 没有高度属性..
  • 是的,我实际上在检查属性时看到了这一点。无论如何我都试过了,它只是被忽略了,但对于我的生活,我无法弄清楚为什么没有应用 td 高度。
  • 它正在工作.... 查看演示 ...jsfiddle.net/SjyqV
  • 嘿伙计,感谢您花时间帮助我。我已经发布了关于这个问题的小提琴截图。我想现在的问题是为什么它不能在 Firefox 上运行?

标签: html html-table


【解决方案1】:

刚刚想通了。在 Firefox 上,您必须在 CSS 中设置 display: block; 否则不会应用表格高度:

<body>
<table style="border: 1px solid black; border-radius: 10px; padding: 0px;padding-top: 6px; margin: 0px; display: block;" align="left" bgcolor="#FFFFFF" border="1" cellpadding="0" cellspacing="0" height="842" width="595">
<tbody>
<tr><td height="100" style="display: block">Test</td></tr>
<tr><td height="100" style="display: block">Test</td></tr>
</tbody>
</table>
</body>

【讨论】:

  • 确实如此。我刚刚尝试将 display:block 添加到 TD 和 TR 并且正在应用 HEIGHT 属性。但是,它弄乱了表格的整个流程 - TD 在另一个下方流动(我猜想 display:block 元素应该......)所以似乎使用 display:block 用于 TD 和TRs。
  • This Mozilla bug from 1999 包含一个解决方法:在img 元素上设置display:block;。它被标记为 INVALID WONTFIX,说这是规范的解释问题……呵呵……
猜你喜欢
  • 1970-01-01
  • 2012-07-14
  • 2016-08-03
  • 2018-11-25
  • 2016-03-13
  • 2012-02-29
  • 1970-01-01
  • 2011-08-24
  • 2011-09-15
相关资源
最近更新 更多