我正在使用 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.
在那种情况下,我会尝试使用三个 电子邮件包装器对此进行编码:
- 第一个文本 block 的固定宽度。
- 宽表的宽度未定义(因此它可以在需要时拉伸(stretch))。
- 第二个文本 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/