Question

我完全是创建HTML正文的开始者，但是我需要创建电子邮件的HTML正文，我必须将带有一些数据的电子邮件表放入其中。这是一个非常简单的表，具有2行4列，但是必须拆分3个单元格。因此，我在该单元格内创建了表格（1行2列）。这就是问题所在，在填充这些新单元格时，“主”单元格未正确填充，请参见下文。 an example 如何正确填写。我将不胜感激能填满它的代码。我的html正文：

<table style="text-align: center; padding: 8px; width: 600px;" border="1" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="width: 150px; text-align: center;">Done</td>
<td style="width: 150px; text-align: center;">Success</td>
<td style="width: 150px; text-align: center;">Overwrited</td>
<td style="width: 150px; text-align: center;">Unrecognized</td>
</tr>
<tr>
<td style="font-size: 24px; font-weight: bold;">{1}</td>
<td>
<table style="height: 50px; width: 150px; text-align: center;" >
<tbody>
<tr>
<td style="height: 50px; width: 75px; border-right:solid 1px; font-size: 24px; font-weight: bold;" bgcolor="#00cc00">{2}</td>
<td style="height: 50px; width: 75px; font-size: 24px; font-weight: bold;" bgcolor="#00cc00">{3}%</td>
</tr>
</tbody>
</table>
</td>
<td style="width: 150px; ">
<table style="height: 50px; width: 150px; text-align: center;">
<tbody>
<tr>
<td style="height: 50px; width: 75px; border-right:solid 1px; font-size: 24px; font-weight: bold;" bgcolor="#ee4c50">{4}</td>
<td style="height: 50px; width: 75px; font-size: 24px; font-weight: bold;" bgcolor="#ee4c50">{5}%</td>
</tr>
</tbody>
</table>
</td>
<td style="width: 150px;">
<table style="height: 50px; width: 150px; text-align: center;">
<tbody>
<tr>
<td style="height: 50px; width: 75px; border-right:solid 1px; font-size: 24px; font-weight: bold;" bgcolor="#99ccff">{6}</td>
<td style="height: 50px; width: 75px; font-size: 24px; font-weight: bold;" bgcolor="#99ccff">{7}%</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>

我想得到类似的东西： example

Answer 1

您所有的<table>必须是

<table cellspacing="0" cellpadding="0" border="0">

这将删除<td>

中多余的白色填充

<table cellpadding="0" cellspacing="0" border="0" style="text-align: center; padding: 8px; width: 600px;" border="1"
  cellspacing="0" cellpadding="0">
  <tbody>
    <tr>
      <td style="width: 150px; text-align: center;">Done</td>
      <td style="width: 150px; text-align: center;">Success</td>
      <td style="width: 150px; text-align: center;">Overwrited</td>
      <td style="width: 150px; text-align: center;">Unrecognized</td>
    </tr>
    <tr>
      <td style="font-size: 24px; font-weight: bold;">{1}</td>
      <td>
        <table cellpadding="0" cellspacing="0" border="0" style="height: 50px; width: 150px; text-align: center;">
          <tbody>
            <tr>
              <td style="height: 50px; width: 75px; border-right:solid 1px; font-size: 24px; font-weight: bold;"
                bgcolor="#00cc00">{2}</td>
              <td style="height: 50px; width: 75px; font-size: 24px; font-weight: bold;" bgcolor="#00cc00">{3}%</td>
            </tr>
          </tbody>
        </table>
      </td>
      <td style="width: 150px; ">
        <table cellpadding="0" cellspacing="0" border="0" style="height: 50px; width: 150px; text-align: center;">
          <tbody>
            <tr>
              <td style="height: 50px; width: 75px; border-right:solid 1px; font-size: 24px; font-weight: bold;"
                bgcolor="#ee4c50">{4}</td>
              <td style="height: 50px; width: 75px; font-size: 24px; font-weight: bold;" bgcolor="#ee4c50">{5}%</td>
            </tr>
          </tbody>
        </table>
      </td>
      <td style="width: 150px;">
        <table cellpadding="0" cellspacing="0" border="0" style="height: 50px; width: 150px; text-align: center;">
          <tbody>
            <tr>
              <td style="height: 50px; width: 75px; border-right:solid 1px; font-size: 24px; font-weight: bold;"
                bgcolor="#99ccff">{6}</td>
              <td style="height: 50px; width: 75px; font-size: 24px; font-weight: bold;" bgcolor="#99ccff">{7}%</td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>

单元格内表格的背景，未正确填充

1 个答案: