Question

我有一张row表：

第1行：图片
第2行：文字
第3行：行

我希望表格背景为蓝色，而行（row 3）为白色。所以我在table中制作了一个嵌套row 3，试图将background-color添加到table并将白线作为td在其中 - 但它只是不起作用。

这就是我想要的理想情况：

这是我目前的样子：

＆＃13;

<table border="1" cellpadding="0" cellspacing="0" width="100%">
  <tbody>
    <!--ROW 1 IMAGE -->
    <tr>
      <td align="center" style="font-family:'Open Sans',Helvetica,Arial,sans-serif; background-color:#00adf2;">
        <img alt="Contento" src="https://cdn2.hubspot.net/hubfs/3055391/Inbound/CPD%202017/Email/Newsletter%20%20-%20Customers/speech.png" style="display:block;border:0px;
													    font-family:Arial, Helvetica,sans-serif;color:#ffffff; padding-top: 5px;" width="310">
      </td>
    </tr>
    <!--ROW 1 TEXT -->
    <tr>
      <td align="center" style="background-color:#00adf2; font-family:Helvetica,sans-serif;font-size:14px;line-height:24px;color:#fff;padding-top:10px; text-align: center;">
        Faceate volorunt uta quo moditas
        <br> et labo. Comnima iorehent hit est
        <br> am vit elit volores cimpossime
        <br> serchit, oditiis rehenis volor
        <br> sequisqui ut late cus. Faceate
        <br> volorunt uta quo moditas et labo.
        <br> Comnima ioreh.
      </td>
    </tr>
    <tr>
      <!--ROW 3 LINE -->
      <td align="center" style="font-family:'Open Sans',Helvetica,Arial,sans-serif;padding-top:32px;">
        <!-- NESTED TABLE -->
        <table border="0" cellpadding="0" cellspacing="0">
          <tbody>
            <tr>
              <td align="center" style="font-family:'Open Sans',Helvetica,Arial,sans-serif; background-color:#00adf2; width: 100%;" width="100%">
                <!-- TABLE FOR LINE -->
                <table border="1" cellpadding="0" cellspacing="0" width="100%">
                  <tbody>
                    <tr>
                      <td align="center" bgcolor="#fff" height="3" style="height:4px;width:50px;font-size:0px;" width="130"></td>
                    </tr>
                  </tbody>
                </table>
                <!-- TABLE FOR LINE END -->
              </td>
              <!-- LINE END -->
            </tr>
          </tbody>
        </table>
        <!-- NESTED TABLE END -->
      </td>
    </tr>
  </tbody>
</table>

＆＃13;

Answer 1

删除边框，并将background-color添加到上一个td

<table border="0" cellpadding="0" cellspacing="0" width="100%">
  <tbody>
    <!--ROW 1 IMAGE -->
    <tr>
      <td align="center" style="font-family:'Open Sans',Helvetica,Arial,sans-serif; background-color:#00adf2;">
        <img alt="Contento" src="https://cdn2.hubspot.net/hubfs/3055391/Inbound/CPD%202017/Email/Newsletter%20%20-%20Customers/speech.png" style="display:block;border:0px;font-family:Arial, Helvetica,sans-serif;color:#ffffff; padding-top: 5px;" width="310">
      </td>
    </tr>
    <!--ROW 1 TEXT -->
    <tr>
      <td align="center" style="background-color:#00adf2; font-family:Helvetica,sans-serif;font-size:14px;line-height:24px;color:#fff;padding-top:10px; text-align: center;">
        Faceate volorunt uta quo moditas
        <br> et labo. Comnima iorehent hit est
        <br> am vit elit volores cimpossime
        <br> serchit, oditiis rehenis volor
        <br> sequisqui ut late cus. Faceate
        <br> volorunt uta quo moditas et labo.
        <br> Comnima ioreh.
      </td>
    </tr>
    <tr>
      <!--ROW 3 LINE -->
      <td align="center" style="font-family:'Open Sans',Helvetica,Arial,sans-serif;padding: 22px;background-color:#00adf2;vertical-align:top;">
        <!-- NESTED TABLE -->
        <table border="0" cellpadding="0" cellspacing="0">
          <tbody>
            <tr>
              <td align="center" style="font-family:'Open Sans',Helvetica,Arial,sans-serif; width: 100%;" width="100%">
                <!-- TABLE FOR LINE -->
                <table border="0" cellpadding="0" cellspacing="0" width="100%">
                  <tbody>
                    <tr>
                      <td align="center" bgcolor="#fff" height="3" style="height:4px;width:50px;font-size:0px;" width="130"></td>
                    </tr>
                  </tbody>
                </table>
                <!-- TABLE FOR LINE END -->
              </td>
              <!-- LINE END -->
            </tr>
          </tbody>
        </table>
        <!-- NESTED TABLE END -->
      </td>
    </tr>
  </tbody>
</table>

Answer 2

将背景颜色应用于主表

<table border="1" cellpadding="0" cellspacing="0" width="100%" style="background-color:#00adf2;">

检查出来

<table border="1" cellpadding="0" cellspacing="0" width="100%" style="background-color:#00adf2;">
  <tbody>
    <!--ROW 1 IMAGE -->
    <tr>
      <td align="center" style="font-family:'Open Sans',Helvetica,Arial,sans-serif; background-color:#00adf2;">
        <img alt="Contento" src="https://cdn2.hubspot.net/hubfs/3055391/Inbound/CPD%202017/Email/Newsletter%20%20-%20Customers/speech.png" style="display:block;border:0px;
													    font-family:Arial, Helvetica,sans-serif;color:#ffffff; padding-top: 5px;" width="310">
      </td>
    </tr>
    <!--ROW 1 TEXT -->
    <tr>
      <td align="center" style="background-color:#00adf2; font-family:Helvetica,sans-serif;font-size:14px;line-height:24px;color:#fff;padding-top:10px; text-align: center;">
        Faceate volorunt uta quo moditas
        <br> et labo. Comnima iorehent hit est
        <br> am vit elit volores cimpossime
        <br> serchit, oditiis rehenis volor
        <br> sequisqui ut late cus. Faceate
        <br> volorunt uta quo moditas et labo.
        <br> Comnima ioreh.
      </td>
    </tr>
    <tr>
      <!--ROW 3 LINE -->
      <td align="center" style="font-family:'Open Sans',Helvetica,Arial,sans-serif;padding-top:32px;">
        <!-- NESTED TABLE -->
        <table border="0" cellpadding="0" cellspacing="0">
          <tbody>
            <tr>
              <td align="center" style="font-family:'Open Sans',Helvetica,Arial,sans-serif; background-color:#00adf2; width: 100%;" width="100%">
                <!-- TABLE FOR LINE -->
                <table border="1" cellpadding="0" cellspacing="0" width="100%">
                  <tbody>
                    <tr>
                      <td align="center" bgcolor="#fff" height="3" style="height:4px;width:50px;font-size:0px;" width="130"></td>
                    </tr>
                  </tbody>
                </table>
                <!-- TABLE FOR LINE END -->
              </td>
              <!-- LINE END -->
            </tr>
          </tbody>
        </table>
        <!-- NESTED TABLE END -->
      </td>
    </tr>
  </tbody>
</table>

Answer 3

您忘记将背景颜色添加到第3行

的TD

＆＃13;

<table border="1" cellpadding="0" cellspacing="0" width="100%">
  <tbody>
    <!--ROW 1 IMAGE -->
    <tr>
      <td align="center" style="font-family:'Open Sans',Helvetica,Arial,sans-serif; background-color:#00adf2;">
        <img alt="Contento" src="https://cdn2.hubspot.net/hubfs/3055391/Inbound/CPD%202017/Email/Newsletter%20%20-%20Customers/speech.png" style="display:block;border:0px;
													    font-family:Arial, Helvetica,sans-serif;color:#ffffff; padding-top: 5px;" width="310">
      </td>
    </tr>
    <!--ROW 1 TEXT -->
    <tr>
      <td align="center" style="background-color:#00adf2; font-family:Helvetica,sans-serif;font-size:14px;line-height:24px;color:#fff;padding-top:10px; text-align: center;">
        Faceate volorunt uta quo moditas
        <br> et labo. Comnima iorehent hit est
        <br> am vit elit volores cimpossime
        <br> serchit, oditiis rehenis volor
        <br> sequisqui ut late cus. Faceate
        <br> volorunt uta quo moditas et labo.
        <br> Comnima ioreh.
      </td>
    </tr>
    <tr>
      <!--ROW 3 LINE -->
      <td align="center" style="font-family:'Open Sans',Helvetica,Arial,sans-serif;padding-top:32px; background-color:#00adf2;">
        <!-- NESTED TABLE -->
        <table border="0" cellpadding="0" cellspacing="0">
          <tbody>
            <tr>
              <td align="center" style="font-family:'Open Sans',Helvetica,Arial,sans-serif; background-color:#00adf2; width: 100%;" width="100%">
                <!-- TABLE FOR LINE -->
                <table border="1" cellpadding="0" cellspacing="0" width="100%">
                  <tbody>
                    <tr>
                      <td align="center" bgcolor="#fff" height="3" style="height:4px;width:50px;font-size:0px;" width="130"></td>
                    </tr>
                  </tbody>
                </table>
                <!-- TABLE FOR LINE END -->
              </td>
              <!-- LINE END -->
            </tr>
          </tbody>
        </table>
        <!-- NESTED TABLE END -->
      </td>
    </tr>
  </tbody>
</table>

＆＃13;

向父表添加背景颜色不起作用

3 个答案: