Center content of an HTML table for mail

Navigation
2

I am going crazy trying to center the content that is inside the table, since it is for mail and the compatibility is scarce.

I can not find a way to center it, or to make the account number not a line break.

Thank you! 

<table style="max-width:580px;border:1px solid #D9D9D9;border-radius:3px;margin: 0 auto;" cellspacing="0" cellpadding="0" width="100%">
  <tr>
    <td>
      <table style="border-top:1px solid #D9D9D9;padding:40px 25px;display:flex;">
        <tr style="width:47%;border-right:1px solid #D9D9D9;float:left;padding-right:10px;" width="47%" align="left">
          <td>
            <img style="width:40px;min-height:50px;max-height:75px;padding-right:12px;" width="75" height="50" src="#">
          </td>
          <td style="overflow:hidden;font-size:12px;">
            <span>Visita nuestra web</span><br>
            <a style="text-decoration:underline;" href="#">www.tuurl.com/hola...</a>
          </td>
        </tr>
        <tr style="width:47%;float:left;padding-left:10px;" width="47%" align="left">
          <td>
            <img style="width:40px;min-height:50px;max-height:75px;padding-right:12px;" width="75" height="50" src="#">
          </td>
          <td style="overflow:hidden;font-size:12px;">
            <span><a style="text-decoration:underline;" href="#">Lista online</a> o<br> Nº de cuenta 4444-4444-4444-4444</span>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>
    
asked by Britba 21.03.2018 в 19:59
source

1 answer

1

You have to add the tbody tag with the style: margin auto and width 100%, with the width in 100% you enlarge the container of the two columns and avoid that you cut in number of account and with the margin auto centras the two table rows in its container. Greetings! 

<table style="max-width:580px;border:1px solid #D9D9D9;border-radius:3px;margin: 0 auto;" cellspacing="0" cellpadding="0" width="100%">
    <tr>
      <td>
        <table style="border-top:1px solid #D9D9D9;padding:40px 25px;display:flex;">
            <tbody style="margin: auto; width: 100%;">
              <tr style="width:47%;border-right:1px solid #D9D9D9;float:left;padding-right:10px;" width="47%" align="left">
                <td>
                  <img style="width:40px;min-height:50px;max-height:75px;padding-right:12px;" width="75" height="50" src="#">
                </td>
                <td style="overflow:hidden;font-size:12px;">
                  <span>Visita nuestra web</span><br>
                  <a style="text-decoration:underline;" href="#">www.tuurl.com/hola...</a>
                </td>
              </tr>
              <tr style="width:47%;float:left;padding-left:10px;" width="47%" align="left">
                <td>
                  <img style="width:40px;min-height:50px;max-height:75px;padding-right:12px;" width="75" height="50" src="#">
                </td>
                <td style="overflow:hidden;font-size:12px;">
                  <span><a style="text-decoration:underline;" href="#">Lista online</a> o<br> Nº de cuenta 4444-4444-4444-4444</span>
                </td>
              </tr>
            </tbody>
        </table>
      </td>
    </tr>
  </table>
    
answered by 04.04.2018 в 14:40
keypressevent does not detect the enter key pyqt How can I send files from an html to javascript