请帮助我不知道如何使表格容器采用100%的宽度。 我正在预览手机中的HTML,宽度为375px,但是右侧似乎有空白区域。我已经尝试将min-width更改为375px,将表布局更改为auto和width:100%
由于某种原因,即使在Javascript / HTML / CSS代码段中,我也无法添加代码,因此我的内容中大部分都包含代码。 但这是HTML代码的链接-
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:v="urn:schemas-microsoft-com:vml">
<head></head>
<body class="clean-body" style="margin: 0;padding: 0;-webkit-text-size-adjust: 100%;background-color: #F5F5F5;">
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta content="width=device-width" name="viewport">
<meta content="IE=edge" http-equiv="x-ua-compatible">
<title></title>
<style type="text/css">
body {
margin: 0;
padding: 0;
}
ol > li,ul > li,p,span,h1,h2,h3,h4,h5,h6,h7 {
font-size: 14px;
}
table,td,tr {
vertical-align: top;
border-collapse: collapse;
}
* {
line-height: inherit;
}
a[x-apple-data-detectors=true] {
color: inherit !important;
text-decoration: none !important;
}
</style>
<style id="media-query" type="text/css">
@media (max-width: 670px) {
#content_con {
padding-left: 20px;
}
.block-grid,.col {
min-width: 375px !important;
max-width: 100% !important;
display: block !important;
}
.block-grid {
width: 100% !important;
}
.col {
width: 100% !important;
}
.col>div {
margin: 0 auto;
}
img.fullwidth,img.fullwidthOnmobile {
max-width: 100% !important;
}
.no-stack .col {
min-width: 0 !important;
display: table-cell !important;
}
.no-stack.two-up .col {
width: 50% !important;
}
.no-stack .col.num4 {
width: 33% !important;
}
.no-stack .col.num8 {
width: 66% !important;
}
.no-stack .col.num4 {
width: 33% !important;
}
.no-stack .col.num3 {
width: 25% !important;
}
.no-stack .col.num6 {
width: 50% !important;
}
.no-stack .col.num9 {
width: 75% !important;
}
.video-block {
max-width: none !important;
}
.mobile_hide {
min-height: 0px;
max-height: 0px;
max-width: 0px;
display: none;
overflow: hidden;
font-size: 0px;
}
.desktop_hide {
display: block !important;
max-height: none !important;
}
}
</style>
<table bgcolor="#F5F5F5" cellpadding="0" cellspacing="0" class="nl-container" role="presentation" style="table-layout: fixed;vertical-align: top;min-width: 380px;Margin: 0 auto;border-spacing: 0;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;background-color: #F5F5F5;/* width: 100%; */border: 1px solid black;" valign="top" width="100%">
<tbody>
<tr style="vertical-align: top;" valign="top">
<td style="word-break: break-word; vertical-align: top;" valign="top">
<div style="background-color:transparent;">
<div class="block-grid" style="Margin: 0 auto; min-width: 375px; max-width: 650px; overflow-wrap: break-word; word-wrap: break-word; word-break: break-word; background-color: #000000;">
<div style="border-collapse: collapse;display: table;width: 100%;background-color:#000000;">
<div class="col num12" style="min-width: 375px; max-width: 650px; display: table-cell; vertical-align: top; width: 650px;">
<div style="width:100% !important;">
<div style="border-top:0px solid transparent; border-left:0px solid transparent; border-bottom:0px solid transparent; border-right:0px solid transparent; padding-top:30px; padding-bottom:30px; padding-right: 15px; padding-left: 15px;">
<div align="center" class="img-container center fixedwidth" style="padding-right: 0px;padding-left: 0px;">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div style="background-color:transparent;">
<!-- START CONTENT ROW -->
<div class="block-grid mixed-two-up" style="Margin: 0 auto; min-width: 375px; max-width: 650px; overflow-wrap: break-word; word-wrap: break-word; word-break: break-word; background-color: #e7f1f8;">
<div style="border-collapse: collapse;display: table;width: 100%;background-color:#e7f1f8;">
<div class="col num4" style="display: table-cell; vertical-align: top; max-width: 375px; min-width: 216px; width: 216px;">
<div style="width:100% !important;">
<div style="border-top:0px solid transparent; border-left:0px solid transparent; border-bottom:0px solid transparent; border-right:0px solid transparent; padding-top: 15px; padding-bottom:5px; padding-right: 0px; padding-left: 0px;">
<div style="color:#555555;font-family:Arial,Helvetica Neue,Helvetica,sans-serif;line-height:1.2;padding-top:0px;padding-right:10px;padding-bottom:0px;padding-left:10px;">
<div style="font-family: Arial,sans-serif; font-size: 12px; line-height: 1.2; color: #555555; mso-line-height-alt: 14px;">
<p style="font-size: 14px; line-height: 1.2; mso-line-height-alt: 17px; margin: 0;"><strong>PRODUCT:</strong></p>
</div>
</div>
</div>
</div>
</div>
<div id="content_con" class="col num8" style="display: table-cell; vertical-align: top; min-width: 375px; max-width: 432px; width: 433px;">
<div style="width:100% !important;">
<div style="border-top:0px solid transparent; border-left:0px solid transparent; border-bottom:0px solid transparent; border-right:0px solid transparent; padding-top:15px; padding-bottom:5px; padding-right: 0px; padding-left: 0px;">
<div style="color:#555555;font-family:Arial,sans-serif; font-size: 12px; line-height: 1.2; color: #555555; mso-line-height-alt: 14px;">
<p style="font-size: 14px; line-height: 1.2; mso-line-height-alt: 17px; margin: 0;">Test</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</body>
</html>