使用显示块和100％宽度属性时，HTML表td不是全宽 [英] HTML table td not full width when using display block and 100% width attributes
本文介绍了使用显示块和100％宽度属性时，HTML表td不是全宽的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
在适当的情况下，在列类的td单元上使用DISPLAY：BLOCK，但徽标和CALL US td单元在调整到移动大小时不会垂直堆叠。
它为它们增加了100％的宽度，但实际上在移动大小上并不占用屏幕的100％。
JSFIDDLE： http://jsfiddle.net/7bm95wrm/HTML
< body>
< table cellspacing =0cellpadding =0border =0width =100％>
< tr>
< td bgcolor =＃FFFFFFalign =center>
< table width =650pxcellspacing =0cellpadding =3class =container>
< tr>
< td class =alignright greytextstyle =font-size：12px;>阅读此电子邮件时遇到问题。不要惊慌！ < a href =＃class =bold>点击此处< / a>您可以在浏览器中阅读。< / td>
< / tr>
< / table>
< / td>
< / tr>
< tr>
< td class =navbar navbar-inversealign =center>
<！ - 此设置使导航背景拉伸整个屏幕宽度。 - >
< table width =650pxcellspacing =0cellpadding =3class =container>
< tr class =navbarbg navbar-inverse>
< td class =column>< img src =images / logo.jpgalt =title =width =216height =54/>< TD>
< td colspan =2>
< table class =whitetextwidth =400>
< tr>
< td class =smalltext alignrightvalign =bottom>
电话：0161 482 7650< br />
< h2 class =lucidafont>更多来自租赁< / h2>
< / td>
< / tr>
< / table>
< / td>
< / tr>
< / table>
< / td>
< / tr>
< tr>
< td bgcolor =＃FFFFFFalign =center>
< table width =650pxcellspacing =0cellpadding =3class =container toppadding>
< tr>
< td>
< h1 class =bluetext>感谢您下载< br />租赁风景< / h1>
< / td>
< / tr>
< tr>
< td class =greytext bodytext>
< h2 class =bluetext>亲爱的[name]，< / h2>
< p>感谢您下载Leasing Landscape - 我们确信您会发现它很有用。< / p>
< p>要查看您的指南副本，请点击此处：< a href =＃alt =title => [link]< / a>< / p> ;
< p>关心，< / p>
< h2 class =bluetext> CH& L< / h2>
< / td>
< / tr>
< / table>
< / td>
< / tr>
< tr>
< td bgcolor =＃FFFFFFalign =center>
< table width =650pxcellspacing =0cellpadding =3class =container>
< tr>
< td colspan =5>
< hr>
< / td>
< / tr>
< tr>
< td colspan =5style =text-align：center;>
< a href =＃alt =title =>< img src =images / twitter.jpgalt =title =/>< / a>
< a href =＃alt =title =>< img src =images / facebook.jpgalt =title =/>< / a>
< a href =＃alt =title =>< img src =images / googleplus.jpgalt =title =/>< / a>
< a href =＃alt =title =>< img src =images / linkedin.jpgalt =title =/>< / a>
< / td>
< / tr>
< tr style =text-align：center;>
< td colspan =6style =font-size：12px;类= greytext >
< p>版权与复制; 2000-2015真好域名有限公司保留所有权利。< / p>
< / td>
< / tr>
< tr style =text-align：center; font-size：12px;类= 版权 >
< td class =bold column>< a href =＃alt =title =>术语&状况及LT; / A>< / TD>
< td class =bold>< a href =＃alt =title =>隐私< / a>< / td>
< td class =bold>< a href =＃alt =title => Cookie< / a>< / td>
< td class =bold>< a href =＃alt =title =>辅助功能< / 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;颜色：#ffffff;身高：75px; }
hr {}
h1，h2，h3，h4，h5，h6 {font-family：Arial Bold，Gadget，sans-serif;保证金：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和（max-width：480px）{
table {
width：100％！important;
}
@media仅限屏幕和（最大宽度：480px）{
table [class =body_table] {
width：440px！important;
}
table td [class =column] {
width：100％！important;
显示：block！important;
}
}
解决方案
1st事情是你需要制作 html 和 body 100％，这样就可以获得整个浏览器/视图端口宽度
，那么设置 100时的子元素在这种情况下，％会取父母的宽度，即 html / body
问题在您的标记中，您为表设置了 width = 100％，因此表尝试将 100％其父（html / body在你的情况下），并且它们只与页面上的内容一样宽，所以整个宽度不被占用。
更新您的标记如下：
html，body {
font-family：Lucida Grande，Lucida Sans Unicode，Lucida Sans，日内瓦，Verdana，sans-serif;
宽度：100％;
保证金：0;
padding：0;
}
表{
width：100％;
$ / code> 在一般说明中，请使用下面的标记并理解注释
< 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％; / * HTML / Body如果设置了宽度，否则内容宽度* /
border：1px纯红色;
}
.div_2 {
width：50％; / * div_1宽度的50％* /
border：1px纯绿色;
}
.div_3 {
width：70％; / * HTML / Body宽度的50％ - 通知标记* /
border：1px纯蓝色;
}
I am using DISPLAY:BLOCK where appropriate on the td cells with class of column, however the logo and CALL US td cells are not stacking vertically when resized to mobile size.
It's adding 100% width to them however that's not actually taking up 100% of the screen when on mobile size.
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&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 © 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 & 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;
}
}
解决方案
1st thing is that you need to make the html and body 100% so that it takes the whole browser / view-port width
then, the child element on setting 100% will take parents width, which is html / body in this case
Problem in your markup is that you set width=100% for table, so table tries to take 100% of its parent(html/body in your case), and, they are only as wide as content on the page, so whole width is not occupied.
Update your markup as below :
html,body {
font-family: Lucida Grande, Lucida Sans Unicode, Lucida Sans, Geneva, Verdana, sans-serif;
width:100%;
margin:0;
padding:0;
}
table{
width:100%;
}
On a general note, take this below markup and understand the comment
<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;
}
这篇关于使用显示块和100％宽度属性时，HTML表td不是全宽的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
