小编Tho*_*hom的帖子

如何在HTML5中调整表格行高

我查看了网站,但由于它与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>
Run Code Online (Sandbox Code Playgroud)

它显示为您所期望的,作为1像素高的行.

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

<!DOCTYPE html>
Run Code Online (Sandbox Code Playgroud)

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

最新版本的Firefox,Chrome和IE中的问题似乎相同,所以我希望我遗漏了一些东西......

任何建议将不胜感激.

html5 row html-table

9
推荐指数
2
解决办法
2万
查看次数

标签 统计

html-table ×1

html5 ×1

row ×1