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

Question

我有一张截图，如下所示，我必须在 HTML/CSS 中复制它。

附件是我现在可以复制的fiddle。我正在编写 HTML 电子邮件，这就是我在 fiddle.

中使用内联样式的原因

问题陈述：

我想知道 我需要在 fiddle 中添加什么内联样式 以便我能够复制上面的屏幕截图 意思是换行符字符之间。

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

我为实现上述屏幕截图而使用的代码片段是：

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

Answer 1

也许你可以使用 <br> 来换行。

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

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

        <tr>
          <td>
            <table cellpadding="0" cellspacing="0" border="0" width="100%" 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 电子邮件中 table 中的数据单元格元素

Aligning data cell elements in table in html email

html

css

html-table

line-breaks

html-email

对齐 html 电子邮件中 ​​table 中的数据单元格元素

Aligning data cell elements in table in html email

html

css

html-table

line-breaks

html-email

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