在html电子邮件中对齐表格中的数据单元元素 [英] Aligning data cell elements in table in html email

问题描述

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

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

问题陈述：

我想知道 中需要添加的内嵌样式 =https://jsfiddle.net/dehg79qs/embedded/result =nofollow noreferrer>小提琴，这样我就可以复制上面的截图字符间的换行符。

我知道它可以通过 padding-left padding-right 但仍然无法在截图中进行复制。

我为了达到上面的截图所使用的代码片段是：

 < TR> 
< td style =padding-bottom：3％; text-align：left; padding-left：10％;>预订开始日期：2017年11月2日星期四03:15 AM< / td> 
< td style =text-align：center; padding-bottom：3％; padding-left：10％;>预订结束日期：2017年11月16日星期四上午03:15< / td> 
< / tr> 
  

解决方案

也许你可以使用< ; br> 用于分隔线条。

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

 < table cellpadding =0cellspacing =0border =0width = 100％class =mobilestyle =margin：0 auto;对齐= 中心 > 
 
< tr> 
< td> 
< table cellpadding =0cellspacing =0border =0width =100％style =font-size：20px; padding-top：2％;> 
< tr> 
< td style =text-align：center; padding：0 10％3％10％;>预订开始日期：< br>周四< br> 2017年11月2日< br> 03:15 AM< / td> 
< td style =text-align：center; padding：0 10％3％10％>预订结束日期：< br>周四< br> 2017年11月16日< br> 03：15< / td> 
< / tr> 
< / table> 
< / td> 
< / tr> 
 
< / table> 
  

I have a screenshot as shown below which I have to replicate in HTML/CSS.

Attached is the fiddle which I am able to replicate at this moment. I am coding HTML email so that's why I am using inline styling in the fiddle.

Problem Statement:

I am wondering what inline styles I need to add in the fiddle so that I am able to replicate the above screenshot meaning line break between the characters.

I know it can be achieve by padding-left padding-right but still I am not able to replicate as it in the screenshot.

The snippets of code which I have used in order to achieve the above screenshot are:

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

解决方案

Maybe u can use <br> for breaking the lines.

Working example: 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电子邮件中对齐表格中的数据单元元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！