css 对齐用作卡片的表格布局的行

zpqajqem  于 2023-01-27  发布在  其他
关注(0)|答案(1)|浏览(183)

我正在做一个html电子邮件模板,这是我的第一次,我有一个设计要尊重。我真的很挣扎的表格布局。我有这样的布局。

就像你看到的,当文本是大,它使行不对齐。我应该做什么改变来解决这个问题?这里是我的代码只有两张卡:

<table class="table_scale" border="0" align="center" cellpadding="0" cellspacing="0" style="border-collapse: separate;
                                border-spacing: 30px;
                                *border-collapse: expression('separate', cellSpacing='30px');">
  <tr>
    <td style="background-color: #fff; padding: 20px; border-radius: 20px;">
      <table style="border-collapse: separate;border-spacing: 0 10px;">
        <tr>
          <td style="background-color:  #0C49F6; font-style: normal;
                                                    font-weight: 500;
                                                    font-size: 25px;
                                                    color: #FFFFFF; padding: 15px 25px; border-radius: 15px;
                                                    text-align: center;">
            -34% de réduction
          </td>
        </tr>
        <tr>
          <td style="font-style: normal;
                                                    font-weight: 700;
                                                    font-size: 20px;
                                                    color: #1B0F66;">
            E-mail marketing
          </td>
        </tr>
        <tr>
          <td style="font-style: normal;
                                                    font-weight: 400;
                                                    font-size: 19px;
                                                    color: #8C8A8A;">
            Crée votre Site Web personnalisé
          </td>
        </tr>
      </table>
    </td>
    <td style="background-color: #fff; padding: 20px; border-radius: 20px;">
      <table style="border-collapse: separate;border-spacing: 0 10px;">
        <tr>
          <td style="background-color:  #0C49F6; font-style: normal;
                                                    font-weight: 500;
                                                    font-size: 25px;
                                                    color: #FFFFFF; padding: 15px 25px; border-radius: 15px;
                                                    text-align: center;">
            -33% de réduction
          </td>
        </tr>
        <tr>
          <td style="font-style: normal;
                                                    font-weight: 700;
                                                    font-size: 20px;
                                                    color: #1B0F66;">
            Facebook Ads
          </td>
        </tr>
        <tr>
          <td style="font-style: normal;
                                                    font-weight: 400;
                                                    font-size: 19px;
                                                    color: #8C8A8A;">
            Lancer votre publicité sur Facebook & Instagram
          </td>
        </tr>
      </table>
    </td>
  </tr>

</table>
zwghvu4y

zwghvu4y1#

变更完成日期:

  • td宽度为50%
  • 表格宽度为100%
<table class="table_scale" border="0" align="center" cellpadding="0" cellspacing="0" style="border-collapse: separate;
                                border-spacing: 30px;
                                *border-collapse: expression('separate', cellSpacing='30px');">
  <tr>
    <td width="50%" valign="top" style="background-color: #fff; padding: 20px; border-radius: 20px;">
      <table width="100%" style="border-collapse: separate;border-spacing: 0 10px;">
        <tr>
          <td style="background-color:  #0C49F6; font-style: normal;
                                                    font-weight: 500;
                                                    font-size: 25px;
                                                    color: #FFFFFF; padding: 15px 25px; border-radius: 15px;
                                                    text-align: center;">
            -34% de réduction
          </td>
        </tr>
        <tr>
          <td style="font-style: normal;
                                                    font-weight: 700;
                                                    font-size: 20px;
                                                    color: #1B0F66;">
            E-mail marketing
          </td>
        </tr>
        <tr>
          <td style="font-style: normal;
                                                    font-weight: 400;
                                                    font-size: 19px;
                                                    color: #8C8A8A;">
            Crée votre Site Web personnalisé
          </td>
        </tr>
      </table>
    </td>
    <td width="50%" style="background-color: #fff; padding: 20px; border-radius: 20px;">
      <table width="100%" style="border-collapse: separate;border-spacing: 0 10px;">
        <tr>
          <td style="background-color:  #0C49F6; font-style: normal;
                                                    font-weight: 500;
                                                    font-size: 25px;
                                                    color: #FFFFFF; padding: 15px 25px; border-radius: 15px;
                                                    text-align: center;">
            -33% de réduction
          </td>
        </tr>
        <tr>
          <td style="font-style: normal;
                                                    font-weight: 700;
                                                    font-size: 20px;
                                                    color: #1B0F66;">
            Facebook Ads
          </td>
        </tr>
        <tr>
          <td style="font-style: normal;
                                                    font-weight: 400;
                                                    font-size: 19px;
                                                    color: #8C8A8A;">
            Lancer votre publicité sur Facebook & Instagram
          </td>
        </tr>
      </table>
    </td>
  </tr>

</table>

相关问题