强制 table 与内容需要的一样宽

Question

我正在使用 HTML-电子邮件向客户发送数据 table，但是这些 table 可能会变得很宽，至少 2000 像素。我希望 table 占用尽可能多的空间，但不要超出它的需要。

编辑：我知道电子邮件不应该那么宽。问题是 table 的宽度太大，它们应该在电子邮件正文中。如果我将宽度设置为自动，它就会被挤压到容器的宽度。我需要 tables 足够宽以便于阅读，但不要超过必要的宽度。我希望自动计算宽度，但不受容器宽度的限制。

感谢任何答案:)

Answer 1

It's just some plain text, then that super wide table, and some more plain text. preferably I'd like the text to restrict itself to the width of the container, but I want the table to go as far as it needs to, to be humanly readable.

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

第一个文本块的固定宽度。
宽 table 的未定义宽度（因此它可以在需要时拉伸）。
第二个文本块的固定宽度。

像这样：

<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>

强制 table 与内容需要的一样宽

Force table to be as wide as the content needs

html

css

email

html-email