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

我在适当的情况下使用DISPLAY:BLOCK在具有列类别的td单元上，但是当调整到移动大小时，徽标和CALL US td单元没有垂直堆叠

它增加了它们100%的宽度，但是当使用手机尺寸时，这实际上并没有占据100%的屏幕

JSFIDDLE：

HTML

---

第一件事是您需要使

html

和

主体

100%

占据整个浏览器/视图端口的宽度

然后，设置

100%

的子元素将采用父元素宽度，在本例中为

html/body

标记中的问题是，您为

表
设置了
width=100%
，所以表尝试获取其父级的
100%
（在您的例子中为html/正文），并且它们的宽度仅与页面上的内容一样宽，所以整个宽度不被占用

更新您的标记，如下所示：

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>

您仅对一个
td
使用
display:block
，我认为您也需要对其同级
td
应用相同的功能

 <tr class="navbarbg navbar-inverse">
      <td class="column"><img src="images/logo.jpg" alt="" title="" width="216" height="54" /></td>
                <td colspan="2" class="column">
                    <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>


电话：01614827650

更多来自租赁

查看此更新的小提琴
谢谢。然而，蓝色标题部分中的内容需要垂直堆叠（我想是通过使用100%的宽度）。它右边的徽标和内容。那么您只希望蓝色标题的宽度为100%吗？我想我没有把你弄清楚。。需要垂直堆叠？其中的内容（在手机上查看时）。这是一个电子邮件模板。[徽标]然后在其下方[呼叫我们]。低于480px的视口。@JordanC26:像这样=>？您需要调整您的媒体查询以满足您的要求完美！这让我发疯。如果您没有将body/html元素设置为100%，那么td的100%宽度没有参考。
<div class="div_1">div 1
    <div class="div_2">div 2</div>
</div>
<div class="div_3">div 3</div>

.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;
}

 <tr class="navbarbg navbar-inverse">
      <td class="column"><img src="images/logo.jpg" alt="" title="" width="216" height="54" /></td>
                <td colspan="2" class="column">
                    <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>