Aligning data cell elements in table in html email

生来就可爱ヽ(ⅴ<●) 提交于 2019-12-24 18:06:09

问题


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>

回答1:


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> 


来源:https://stackoverflow.com/questions/50959176/aligning-data-cell-elements-in-table-in-html-email

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!