如何在HTML5中调整表格行高

时间:2012-01-08 22:44:35

标签: html5 html-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>

按照您的预期显示为1像素高的行。

但是,如果我使用相同的代码,其doctype为:

<!DOCTYPE html>

显示为6像素高的行...前5个像素,背景颜色为红色,然后是1像素高的图像线。 (我会发布实际图片,但我是新来的,StackOverflow不会让新手发布图片。)

最新版本的Firefox,Chrome和&amp; IE,所以我希望我错过了一些东西......

我们非常感谢任何建议。

3 个答案:

答案 0 :(得分:7)

我的HTML表只包含图像时遇到了同样的问题。将doctype更改为HTML 5后,Chrome,Firefox和IE显示的表格单元格的高度大于图像,而单元格之前的单元格大小与其所包含的图像一样大。

似乎对于HTML 5,浏览器会将表格单元的大小设置为不小于字体大小,而行高将允许文本内容。因此,为了实现与之前相同的外观,我使用了以下内联CSS规则:

<table style="font-size: 1px; line-height: 0;">
...
</table>

答案 1 :(得分:1)

您是否尝试删除所有额外的内联CSS并以此方式尝试?

此外,see this question

无论如何,您正在从HTML 4过渡文档类型更改为HTML 5,因此您可以在the HTML5 specs中找到答案。

但是,如果你不想做很多阅读,这里有一些建议:我看到人们使用em而不是px取得了成功。你的问题是某些情况下,行高不会在HTML5中显示与4-transitional中相同的情况。尝试删除所有内联CSS(最好是添加样式表!!),然后慢慢添加并使用填充等,可能会显示您的问题。

答案 2 :(得分:0)

在将旧应用程序切换到HTML5后,我今天遇到了同样的问题。表格单元格中有数千个透明图像(trans.gif),用于定义tr高度的img height属性。

我写了一个基于jQuery的javascript函数,它在docReady上执行,对我来说效果很好。也许您必须根据需要进行调整(例如图片名称):

v <- function(...)is.integer(...)
attr(v, "hello") <- "world"
attr(is.integer, "hello")
#> NULL

w <- 1:3
v <- w
attr(v, "foo") <- "bar"
attr(w, "foo")
#> NULL