html - 强制表格与内容需要的一样宽

标签 html css email html-email

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

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

感谢任何答案:)

最佳答案

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.

在那种情况下,我会尝试使用三个 电子邮件包装器对此进行编码:

  1. 第一个文本 block 的固定宽度。
  2. 宽表的宽度未定义(因此它可以在需要时拉伸(stretch))。
  3. 第二个文本 block 的固定宽度。

像这样:

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

关于html - 强制表格与内容需要的一样宽,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44049903/

相关文章:

html - 使用 "display: grid"使父级扩展到子级的宽度

jquery - 我第一次点击 jquery 移动页面会添加溢出 :hidden on body tag

python - 通过 python 访问雷鸟电子邮件

javascript - 如何在事件监听器中将父节点与其所有子节点相关联? jQuery/JavaScript

jquery - bootstrap3, jquery 尝试垂直对齐

jquery - 通过另一个 div 时显示/隐藏 DIV

html - 水平排序列表

php - 通过PHP发送多封电子邮件并设置时间间隔

amazon-web-services - 经过验证的 AWS 简单电子邮件服务显示欺骗警告

html - 试图在 Font Awesome 图标下排列文本