在html电子邮件中对齐表格中的数据单元格元素

Posted 2023-03-06

【中文标题】在html电子邮件中对齐表格中的数据单元格元素

【英文标题】：Aligning data cell elements in table in html email

【发布时间】：2018-11-30 05:36:45

【问题描述】：

我有一个如下所示的屏幕截图，我必须在 html/CSS 中复制它。

附件是fiddle，我现在可以复制它。我正在编写 HTML 电子邮件，这就是我在小提琴中使用内联样式的原因。

问题陈述：

我想知道我需要在fiddle 中添加哪些内联样式，以便我能够复制上面的屏幕截图表示字符之间的换行符。

我知道它可以通过padding-left padding-right 实现，但我仍然无法在屏幕截图中复制它。

为了实现上面的截图，我使用的代码的 sn-ps 是：

<tr>
   <td style="padding-bottom: 3%;text-align:left;padding-left:10%;">booking  start date: Thursday 2nd of November 2017 03:15 AM</td>
   <td style="text-align:center;padding-bottom: 3%;padding-left:10%;">booking end date:  Thursday 16th of November 2017 03:15 AM</td>
</tr>

【参考方案1】：

也许你可以使用<br> 来打破界限。

工作示例：https://jsfiddle.net/79k6oxmq/

<table cellpadding="0" cellspacing="0" border="0"  class="mobile" style="margin: 0 auto;" align="center">       

        <tr>
          <td>
            <table cellpadding="0" cellspacing="0" border="0"  style=" font-size:20px;padding-top:2%;">
              <tr>
                <td style="text-align:center; padding:0 10% 3% 10%;">booking  start date:<br>Thursday<br> 2nd of November 2017<br> 03:15 AM</td>
                <td style="text-align:center; padding:0 10% 3% 10%">booking end date:<br>  Thursday<br>16th of November 2017<br>03:15 AM</td>
              </tr>   
            </table>
          </td>
        </tr>

    </table> 

【讨论】：

换行符似乎在 html 电子邮件中不起作用。你有在 html 电子邮件中编码的经验吗？

虽然你的小提琴看起来不错，但我不确定我们是否可以在 html 电子邮件中使用 br 标签。

teamtreehouse.com/community/…

您可以参考以上链接

为什么需要添加一个   ?