如何在 HTML5 中调整表格行高
Posted
技术标签:
【中文标题】如何在 HTML5 中调整表格行高【英文标题】：How to adjust table row height in HTML5 【发布时间】：2012-02-05 14:41:54 【问题描述】：我浏览了该网站，但找不到任何可以解决这个与 html5 相关的特定问题的内容。虽然我总是有可能忽略它......如何使用 html5 在表格中获得 1px 的行高？以下代码在 html 4.01 中按预期工作（我投入了包括厨房水槽在内的所有内容，试图在 html5 中使行高仅为 1px，并添加了背景颜色以显示表格行）：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<body style="background-color:#F3F3F3;">
<table style='width:500px; vertical-align:top; border-collapse:separate; border:0px; padding:0px; border-width:0px; margin:0px;'>
<tr style="line-height:1px; vertical-align:top; border-collapse:separate; border:0px; padding:0px; border-width:0px; height:1px; margin:0px; max-height:1px;">
<td style="background-color:red; line-height:1px; vertical-align:top; border-collapse:separate; border:0px; padding:0px; border-width:0px; height:1px; margin:0px; max-height:1px;">
<img style="width:100%; height:1px;" src="/images/pixsolid.gif" alt=''>
</td>
</tr>
</table>
</body></html>
它显示为 1 像素高的行。
但如果我使用相同的代码，其文档类型为：
<!DOCTYPE html>
它显示为一个 6 像素高的行...前 5 个像素的背景颜色为红色，然后是 1 像素高的图像行。 （我会发布实际图片，但我是新来的，*** 不会让新手发布图片。）
在最新版本的 Firefox、Chrome 和 IE 中，问题似乎相同，所以我想我遗漏了一些东西......
任何建议将不胜感激。
【问题讨论】：
对于它的价值，在我的计算机上运行 Safari 6.0.2，我得到了 HTML5 文档类型和 HTML4 过渡文档类型完全相同的结果。我看到两者都是红色的 1px 背景。 【参考方案1】：我在只包含图像的 HTML 表格中遇到了同样的问题。将文档类型更改为 HTML 5 后，Chrome、Firefox 和 IE 显示的表格单元格高度大于图像，而之前的单元格与它们包含的图像一样大。
似乎对于 HTML 5，浏览器会将表格单元格的大小设置为不小于您的 font-size 和 line-height 允许的文本内容。因此，为了获得与之前相同的外观，我使用了以下内联 CSS 规则：
<table style="font-size: 1px; line-height: 0;">
...
</table>
【讨论】：
【参考方案2】：您是否尝试过删除所有额外的内联 CSS 并尝试这样做？
另外，see this question
无论如何，您正在从 HTML 4 过渡文档类型更改为 HTML 5，因此您可能可以在 the HTML5 specs 中找到答案。
但是，如果您不想大量阅读，这里有一些建议：我看到人们使用 em 代替 px 取得了成功。您的问题是，在某些情况下，行高在 HTML5 中的显示与在 4-transitional 中的显示不同。尝试删除所有内联 CSS（最好添加样式表！！），然后慢慢添加并使用填充等，可能会发现您的问题。
【讨论】：
您指出的问题似乎不适用于表格行（尝试了一些变体）。关于内联 CSS，我尝试添加/减去大部分内容。不要仅仅为了解决问题而使用样式表。在生产代码中使用了样式表。 据我所见，这不是表格行或 div 或 p 标签的问题，而是浏览器如何解释和运行 HTML5 文档类型，特别是关于行高和字体大小.【参考方案3】：在将旧应用程序切换到 HTML5 后，我今天遇到了同样的问题。表格单元格中有成千上万的透明图像（trans.gif）出现，并且用于定义 tr 高度的 img height 属性。
我写了一个基于 jQuery 的 javascript 函数，它在 docReady 上执行，它对我来说很好用。也许您必须根据需要对其进行调整（例如图像名称）：
function fixTransGifHeight()
// HTML5 td height is oriented on font-size, now
var src;
var height;
var parent;
$('img').each(function()
src = $(this).attr('src').toUpperCase();
height = parseInt($(this).attr('height'));
if(src.indexOf('TRANS.GIF') > -1)
parent = $(this).parent();
if(parent.is('td'))
parent.css('line-height', height + 'px');
parent.css('font-size', height + 'px');
);
【讨论】：
以上是关于如何在 HTML5 中调整表格行高的主要内容，如果未能解决你的问题，请参考以下文章
excel如何设置表格的大小，比如列宽9厘米行高4厘米，不是设置单元格，是整个表格