Html - table - td 之 width和height奥妙之处

最新推荐文章于 2019-11-03 10:14:57 发布

宸路

最新推荐文章于 2019-11-03 10:14:57 发布

阅读量1k

点赞数

分类专栏： ASP.NET 文章标签： html table border 文档

ASP.NET 专栏收录该内容

96 篇文章 0 订阅

订阅专栏

来自：http://www.cnblogs.com/icewee/articles/2018161.html

最近经常要调整系统中的一些页面，虽然不是专业的美工，但也要略知一二才能应付得了。

例一：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title>table.html</title>
        <meta http-equiv="content-type" content="text/html; charset=GBK">
        <style type="text/css">
<!--
body {
    margin: 0px;
}
//
-->
</style>
    </head>
    <body>
        <table height="100%" width="100%" cellSpacing="0" cellPadding="0"
            border="2" bordercolor="black">
            <tr>
                <td height="100%" width="200px" bgcolor="red">

                </td>
                <td height="100%" width="10px" bgcolor="green">

                </td>
                <td height="100%" width="100%" bgcolor="blue">

                </td>
            </tr>
        </table>
    </body>
</html>

上面的效果为整个页面呈现蓝色，看起来没什么奇怪的，因为第三个td设置了宽度为100%，所以前两个td的宽度自然被挤没了。只要把红色的100%去掉留空，或者干脆不写宽度，那么正是想看到的结果，第三个td占用剩余的文档宽度。

例二：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title>table.html</title>
        <meta http-equiv="content-type" content="text/html; charset=GBK">
        <style type="text/css">
<!--
body {
    margin: 0px;
}
//
-->
</style>
    </head>
    <body>
        <table height="100%" width="100%" cellSpacing="0" cellPadding="0"
            border="2" bordercolor="black">
            <tr>
                <td height="200px" width="100%" bgcolor="red">

                </td>
            </tr>
            <tr>
                <td height="100px" width="100%" bgcolor="green">

                </td>
            </tr>
            <tr>
                <td height="100%" width="100%" bgcolor="blue">

                </td>
            </tr>
        </table>
    </body>
</html>

这次table改为三行，宽度都为100%，三个tr分整个文档的高度，第三个td的高度100%，根据例一的经验，第三个tr应该会占据其余两个tr的高度，也就是和例一一样的效果，满屏蓝色。但是结果却不是想象中的那样。接着把100%换为空串或去掉高度的设置，效果都一样。这不能用什么来解释，只能记住，这就是td设置高度和宽度的差别。

宸路

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Html - table - td 之 width和height奥妙之处

来自：http://www.cnblogs.com/icewee/articles/2018161.html最近经常要调整系统中的一些页面，虽然不是专业的美工，但也要略知一二才能应付得了。例一： table.html
复制链接

扫一扫

专栏目录