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

时间:2018-06-21 01:36:47

标签: html css html-table html-email line-breaks

我有一个截图,如下所示,我必须在HTML / CSS中进行复制。

enter image description here

现在可以复制的是fiddle。我正在编码HTML电子邮件,所以这就是为什么我在小提琴中使用内联样式。



问题陈述:

我想知道我需要在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>

1 个答案:

答案 0 :(得分: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>