个人中心
gpt4 book ai didi

使用显示 block 和 100% 宽度属性时 HTML 表格 td 不是全宽

转载 作者：太空宇宙 更新时间：2023-11-04 03:00:24 26 4
gpt4 key购买 nike

我在具有列类的 td 单元格上适本地使用 DISPLAY:BLOCK，但是当调整到移动尺寸时， Logo 和 CALL US td 单元格不会垂直堆叠。

它为它们增加了 100% 的宽度，但是在移动尺寸上，这实际上并没有占据 100% 的屏幕。

JSFIDDLE:http://jsfiddle.net/7bm95wrm/

HTML

<body>
<table cellspacing="0" cellpadding="0" border="0" width="100%">
    <tr>
        <td bgcolor="#FFFFFF" align="center">
            <table width="650px" cellspacing="0" cellpadding="3" class="container">
                <tr>
                    <td class="alignright greytext" style="font-size: 12px;">Having problems reading this email. Don't panic! <a href="#" class="bold">Click here</a> an you can read it in a browser.</td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td class="navbar navbar-inverse" align="center">
            <!-- This setup makes the nav background stretch the whole width of the screen. -->
            <table width="650px" cellspacing="0" cellpadding="3" class="container">
                <tr class="navbarbg navbar-inverse">
                    <td class="column"><img src="images/logo.jpg" alt="" title="" width="216" height="54" /></td>
                    <td colspan="2">
                        <table class="whitetext" width="400">
                          <tr>
                            <td class="smalltext alignright" valign="bottom">
                                Call: 0161 482 7650<br />
                                <h2 class="lucidafont">More from Leasing</h2>
                            </td>
                          </tr>
                        </table>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td bgcolor="#FFFFFF" align="center">
            <table width="650px" cellspacing="0" cellpadding="3" class="container toppadding">
                <tr>
                    <td>
                        <h1 class="bluetext">Thank you for downloading<br /> the Leasing Landscape</h1>
                    </td>
                </tr>
                <tr>
                    <td class="greytext bodytext">
                        <h2 class="bluetext">Dear [name],</h2>
                        <p>Thank you for downloading the Leasing Landscape - we're sure you'll find it useful.</p>
                        <p>To view your copy of the guide, please click here: <a href="#" alt="" title="">[link]</a></p>
                        <p>Regards,</p>
                        <h2 class="bluetext">The team at CH&amp;L</h2>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td bgcolor="#FFFFFF" align="center">
            <table width="650px" cellspacing="0" cellpadding="3" class="container">
                <tr>
                    <td colspan="5">
                        <hr>
                    </td>
                </tr>
                <tr>
                    <td colspan="5" style="text-align:center;">
                        <a href="#" alt="" title=""><img src="images/twitter.jpg" alt="" title="" /></a>
                        <a href="#" alt="" title=""><img src="images/facebook.jpg" alt="" title="" /></a>
                        <a href="#" alt="" title=""><img src="images/googleplus.jpg" alt="" title="" /></a>
                        <a href="#" alt="" title=""><img src="images/linkedin.jpg" alt="" title="" /></a>
                    </td>
                </tr>
                <tr style="text-align:center;">
                    <td colspan="6" style="font-size: 12px;" class="greytext">
                        <p>Copyright &copy; 2000-2015 Really Good Domains Ltd. All rights reserved.</p>
                    </td>
                </tr>
                <tr style="text-align:center; font-size: 12px;" class="copyright">
                    <td class="bold column"><a href="#" alt="" title="">Terms &amp; Conditions</a></td>
                    <td class="bold"><a href="#" alt="" title="">Privacy</a></td>
                    <td class="bold"><a href="#" alt="" title="">Cookies</a></td>
                    <td class="bold"><a href="#" alt="" title="">Accessibility</a></td>
                    <td class="bold"><a href="#" alt="" title="">Sitemap</a></td>
                </tr>
            </table>
        </td>
    </tr>
</table>

CSS

body { font-family: Lucida Grande,Lucida Sans Unicode,Lucida Sans,Geneva,Verdana,sans-serif; }
    td {  }
    .alignright { text-align: right; }
    .navbarbg { background-color: #283791; color: #ffffff; height: 75px; }
    hr {  }
    h1,h2,h3,h4,h5,h6 { font-family: Arial Bold,Gadget,sans-serif; margin: 0; }
    a { color: #283790; }
    .whitetext { color: #ffffff; }
    .bluetext { color: #283790; }
    .greytext { color: #9f9f9f; }
    .smalltext { font-size: 14px; }
    .bodytext { font-size: 13px; padding-top: 20px; }
    .lucidafont { font-family: Lucida Grande,Lucida Sans Unicode,Lucida Sans,Geneva,Verdana,sans-serif; }
    .toppadding { padding-top: 20px; padding-bottom: 10px; }
    .bold { font-weight: bold; }
    /* .copyright td { border-right: 1px solid #000; height: 5px; }
    .copyright td:last-child { border-right: none; } */
    @media screen and (max-width:480px) {
        table {
            width: 100%!important;
        }
    }
    @media only screen and (max-width: 480px) {
        table[class="body_table"] {
            width: 440px!important;
        }

        table td[class="column"] {
            width:100%!important;
            display: block!important;
        }
    }

最佳答案

第一件事是您需要制作 html 和 body 100% 以便它占用整个浏览器/ View -端口 宽度

然后，设置100%的子元素将占用父元素的宽度，在本例中为html/body

您的标记中的问题是您为 table 设置了 width=100%，因此 table 尝试采用其父项的 100%( html/body 在你的情况下)，并且它们仅与页面上的内容一样宽，因此不会占用整个宽度。

更新您的标记如下:

html,body {
    font-family: Lucida Grande, Lucida Sans Unicode, Lucida Sans, Geneva, Verdana, sans-serif;
    width:100%;
    margin:0;
    padding:0;
}
table{
    width:100%;
}

一般来说，请在标记下方阅读并理解评论

<div class="div_1">div 1
    <div class="div_2">div 2</div>
</div>
<div class="div_3">div 3</div>

CSS

.div_1 {
    width:100%; /*of HTML/Body if width is set, else content width*/
    border:1px solid red;
}
.div_2 {
    width:50%; /*50% of div_1 width*/
    border:1px solid green;
}
.div_3 {
    width:70%; /*50% of HTML / Body width - notice markup*/
    border:1px solid blue;
}

关于使用显示 block 和 100% 宽度属性时 HTML 表格 td 不是全宽，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31427570/

26 4 0
文章推荐： python - Selenium 为未使用的蜘蛛运行 Firefox 驱动程序
文章推荐： node.js - 无法从 Node js中的函数中获得 promise
文章推荐： python - stormpath - 如何控制使用的目录
文章推荐： javascript - 如何恢复被覆盖的 native 函数
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com