Html 如何在 HTML5 中调整表格行高
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8782060/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to adjust table row height in HTML5
提问by Thom
I've looked through the site, and haven't been able to find anything that addresses this particular question as it relates to html5. Though it's always possible I overlooked it... How do I get a row height of 1px in a table using html5? The following code works as expected in html 4.01 (I've thrown in everything including the kitchen sink in an attempt to get the row height to be just 1px in html5, with background colors added to show the table row):
我浏览了该网站，但没有找到任何解决此特定问题的内容，因为它与 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>
It displays as you would expect, as a 1 pixel high row.
它按您的预期显示为 1 像素高的行。
But if I use the identical code with a doctype of:
但是，如果我使用具有以下文档类型的相同代码：
<!DOCTYPE html>
It displays as a 6 pixel tall row... The top 5 pixels with the background color of red, and then the 1 pixel high image line. (I would have posted actual images, but I'm new here, and StackOverflow won't let newbies post images.)
它显示为一个 6 像素高的行...前 5 个像素的背景颜色为红色，然后是 1 个像素高的图像行。（我会发布实际图片，但我是新来的，StackOverflow 不会让新手发布图片。）
The problem appears identical in the latest versions of Firefox, Chrome, & IE, so I expect I'm missing something...
该问题在最新版本的 Firefox、Chrome 和 IE 中似乎相同，所以我希望我遗漏了一些东西......
Any suggestions would be much appreciated.
任何建议将不胜感激。
回答by Frank S.
I had the same problem with an HTML table containing only images. After changing the doctype to HTML 5, Chrome, Firefox and IE displayed the table cells with a height larger than the image whereas before the cells were just as big as the images they contained.
我对仅包含图像的 HTML 表有同样的问题。将文档类型更改为 HTML 5 后，Chrome、Firefox 和 IE 显示表格单元格的高度大于图像，而在此之前，单元格与它们包含的图像一样大。
It seems that for HTML 5 the browsers will size the table cells no smaller than your font-size and line-height would allow for text content. So to achieve the same look as before I used the following inline CSS rules:
似乎对于 HTML 5，浏览器会将表格单元格的大小设置为不小于您的字体大小和行高允许文本内容的大小。因此，为了实现与之前相同的外观，我使用了以下内联 CSS 规则：
<table style="font-size: 1px; line-height: 0;">
...
</table>
回答by cegfault
Have you tried removing all the extra inline CSS and trying it that way?
您是否尝试过删除所有额外的内联 CSS 并以这种方式进行尝试？
Also, see this question
另外，看到这个问题
Anyway, you're changing from HTML 4 transitional doctype to HTML 5, so you can probably find your answer in the HTML5 specs.
无论如何，您正在从 HTML 4 过渡文档类型更改为 HTML 5，因此您可能可以在HTML5 规范中找到答案。
But, if you don't want to do a lot of reading, here's some advise: I've seen people have success with using em instead of px. Your issue is that some situations the line-height will not display the same in HTML5 as it did in 4-transitional. Try removing all your inline CSS (and, preferably, add a stylesheet!!), then slowly adding in and playing with the padding, etc, may reveal your problem.
但是，如果你不想做大量阅读，这里有一些建议：我已经看到人们成功地使用 em 而不是 px。您的问题是在某些情况下，行高在 HTML5 中的显示方式与在 4-transitional 中的显示方式不同。尝试删除所有内联 CSS（并且最好添加样式表！！），然后慢慢添加并使用填充等，可能会发现您的问题。
回答by Martron
I had the same problem today, after switching an old application to HTML5. There are thousands of occurences of transparent images (trans.gif) within table cells and the img height attribute used to define the tr height.
在将旧应用程序切换到 HTML5 后，我今天遇到了同样的问题。表格单元格中出现了数千次透明图像 (trans.gif)，并且用于定义 tr 高度的 img 高度属性。
I wrote a little jQuery based javascript function which is executed on docReady and it works fine for me. Maybe you'll have to adjust it to your needs (e.g. image name):
我写了一个基于 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');
}
}
});
}
