Question

我正在使用HTML电子邮件向客户端发送数据表，但这些表可以变得非常宽，至少2000px。我希望那张桌子可以占用尽可能多的空间，但不过只需要它。

编辑：我知道电子邮件不应该那么广泛。问题是表格的宽度很大，应该在电子邮件正文中。如果我在auto上留下宽度，它就会被挤压到容器的宽度。我需要表格足够宽以便可读，但不要超过必要的范围。我希望自动计算宽度，但不要受容器宽度的限制。

感谢您的回答：）

Answer 1

它只是一些纯文本，然后是超宽表，还有一些更纯文本。最好我喜欢文本将自己限制在容器的宽度，但我希望表格尽可能地去，以便人类可读。

在这种情况下，我尝试使用三个电子邮件包装器对此进行编码：

第一个文本块的固定宽度。
宽表的未定义宽度（如果需要，可以拉伸）。
第二个文本块的固定宽度。

这样的事情：

＆＃13;

<body width="100%" bgcolor="#ffffff" style="margin: 0; mso-line-height-rule: exactly;">
    <center style="width: 100%; background: #ffffff; text-align: left;">

        <!-- some plain text : BEGIN -->
        <div style="max-width: 680px; margin: auto;" class="email-container">
            <!--[if mso]>
            <table role="presentation" aria-hidden="true" cellspacing="0" cellpadding="0" border="0" width="680" align="center">
            <tr>
            <td>
            <![endif]-->
                <table role="presentation" aria-hidden="true" cellspacing="0" cellpadding="0" border="0" align="center" width="100%" style="max-width: 680px;">
                    <tr>
                        <td>
                            some plain text
                        </td>
                    </tr>
                </table>
            <!--[if mso]>
            </td>
            </tr>
            </table>
            <![endif]-->
        </div>
        <!-- some plain text : END -->

        <!-- that super wide table : BEGIN -->
        <div style="margin: auto;" class="email-container">
            <!--[if mso]>
            <table role="presentation" aria-hidden="true" cellspacing="0" cellpadding="0" border="0" align="center">
            <tr>
            <td>
            <![endif]-->
                <table role="presentation" aria-hidden="true" cellspacing="0" cellpadding="0" border="0" align="center">
                    <tr>
                        <td>
                            some plain text
                        </td>
                    </tr>
                </table>
            <!--[if mso]>
            </td>
            </tr>
            </table>
            <![endif]-->
        </div>
        <!-- that super wide table : END -->

        <!-- some more plain text : BEGIN -->
        <div style="max-width: 680px; margin: auto;" class="email-container">
            <!--[if mso]>
            <table role="presentation" aria-hidden="true" cellspacing="0" cellpadding="0" border="0" width="680" align="center">
            <tr>
            <td>
            <![endif]-->
                <table role="presentation" aria-hidden="true" cellspacing="0" cellpadding="0" border="0" align="center" width="100%" style="max-width: 680px;">
                    <tr>
                        <td>
                            some plain more text
                        </td>
                    </tr>
                </table>
            <!--[if mso]>
            </td>
            </tr>
            </table>
            <![endif]-->
        </div>
        <!-- some more plain text : END -->

    </center
</body>

＆＃13;

强制表与内容需求一样宽

1 个答案: