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

Question

我完全是创建 HTML body 的初学者，但我需要创建 HTML body 的电子邮件，我必须将其放入该电子邮件中Table 有一些数据。它非常简单 table，有 2 行和 4 列，但是有 3 个单元格必须拆分。所以我在该单元格内创建了 table（1 行 2 列）。这就是问题所在，在填充这些新单元格时，"main" 单元格未正确填充，请参见下文。 an example 如何正确填写。我将不胜感激填充它的代码。我的 html body:

<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>

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

Background of table inside cell, is not filled correctly

html

email

html-email