电子邮件中具有单个固定宽度单元格的 100% 宽度表格答案

【问题标题】：100% width table in email with single fixed width cell电子邮件中具有单个固定宽度单元格的 100% 宽度表格
【发布时间】：2014-11-06 19:52:25
【问题描述】：

我正在构建一个非常简单的 HTML 电子邮件。有一张表，一行一格。我希望表格为 100% 宽（以设置填充窗口的背景颜色），并且单元格以 600px 的宽度居中。麻烦的是它不起作用。这可能吗？感谢您提供的帮助，我花了一个小时在互联网上搜索，但还没有走得太远。

<body>
    <table width="100%" border="0" cellpadding="0" cellspacing="0" height="100%" bgcolor="#50917b"  align="center" >
        <tr>
            <td valign="top" max-width="600" bgcolor="#999999" >
            content test
            </td>
        </tr>
    </table>
</body>

【问题讨论】：

你不能像max-width="600"那样设置属性，也不应该像bgcolor="#999999"那样设置它们。相反，使用style="max-width:600;background-color:#999;"
谢谢，但如前所述，我正在构建 HTML 电子邮件，因此希望/需要使用 HTML 属性而不是 CSS 内联样式。我试过你的建议，但它不起作用。我有一种感觉，单元格/单元格的宽度不可能小于表格的宽度。
而你有使用一张桌子？我的意思是，如果您只是将元素居中，为什么要使用表格？
表格是处理 HTML 电子邮件的方式。单个单元格将包含我的一列电子邮件。一列内的垂直间距由行间距、中断和行间距控制。该表是设置我的背景颜色，因为它不能在body标签上设置。
你仍然不能使用 max-width 因为它不是 HTML 属性。你可以使用宽度。如果你想使用 max-width inline 你可以使用style="max-width: 600px;"

标签： html html-email

【解决方案1】：

如果你想实现this试试this：

<body>
    <table width="100%" border="0" cellpadding="0" cellspacing="0" height="100%" bgcolor="#50917b"  align="center" >
        <tr>
            <td></td>
            <td valign="top" style="width: 600px; background: #999999;">               
                content test  
            </td>
            <td></td>
        </tr>
    </table>
</body>

【讨论】：

感谢您的帮助，但如前所述，我正在构建 HTML 电子邮件，因此不支持 DIV。
现在试试，这肯定会奏效。内联样式在 html 电子邮件中起作用，这是因为您只有一个 td，如果您添加其他的，它会将您的 td 调整为 600px；
这适用于将内容添加到左右单元格（非中断空格）。如果没有内容，在 Safari 和 Chrome 中，单元格的宽度为 non，中间单元格（包含我的电子邮件通讯）的宽度为 100%。感谢您的帮助
为了清楚起见，并不是不支持<divs>，而是不支持浮点数。因此，<divs> 应谨慎使用。

【解决方案2】：

试试这个.. 外部表为 100%，内部嵌套表为 600 像素并与中心对齐。所以这对你来说应该很好。 :)

<body>
    <table class="wrapper" width="100%" border="0" cellpadding="0" cellspacing="0">
        <tr>
           <td bgcolor="#50917b" align="center">
            <table class="main" cellpadding="0" width="600" cellspacing="0" border="0">
              <tr>
                <td valign="top" bgcolor="#999999">
                  content test
               </td>
              </tr>
           </table>
          </td>
        </tr>
    </table>
</body>

【讨论】：