Question

我在fiddle中有如下结构。

HTML

<table width="100%" border="0" cellspacing="0" cellpadding="20" style="width:100%;">
    <tbody>
        <tr style="text-align:justify;">
            <td valign="top"><font face="Arial,Helvetica,sans-serif" size="1" color="#333333"><span style="font-size:12px;">Hello,</span></font>
            <br><br>
            <font face="Arial,Helvetica,sans-serif" size="1" color="#333333"><span style="font-size:12px;">Following contact form has been submitted.</span></font> 
            <div>
                <font face="Arial,sans-serif!important" size="1">
                    <span style="font-size:13px;">
                        <div style="margin-top:5px;">&nbsp;</div>
                        <table width="100%" border="0" cellspacing="0" cellpadding="2" style="width:100%;">
                            <tbody>
                                <tr>
                                    <td align="left" valign="top" style="width:17%;text-align:justify;"><font face="Arial,Helvetica,sans-serif" size="1" color="#333333"><span style="font-size:12px;"><b>Name :</b></span></font></td>
                                    <td align="left" valign="top" style="width:83%;text-align:justify;"><font face="Arial,Helvetica,sans-serif" size="1" color="#333333"><span style="font-size:12px;">pratik </span></font></td>
                                </tr>
                                <tr>
                                    <td align="left" valign="top" style="text-align:justify;"><font face="Arial,Helvetica,sans-serif" size="1" color="#333333"><span style="font-size:12px;"><b>Email :</b></span></font></td>
                                    <td align="left" valign="top" style="text-align:justify;"><a href="redir.aspx?C=QoTsFntNs06IpxOuMMbFYRtQzW2GF9EIuKkNMxEh-PRF-3FywVp943MT2lFJlCHlMFKl71eLJAk.&amp;URL=mailto%3ap%40d.com" target="_blank"><font face="Arial,Helvetica,sans-serif" size="1"><span style="font-size:12px;">p@d.com</span></font></a></td>
                                </tr>
                                <tr>
                                    <td align="left" valign="top" style="text-align:justify;"><font face="Arial,Helvetica,sans-serif" size="1" color="#333333"><span style="font-size:12px;"><b>Phone :</b></span></font></td>
                                    <td align="left" valign="top" style="text-align:justify;"><font size="1"><span style="font-size:12px;">8</span></font></td>
                                </tr>
                                <tr>
                                    <td align="left" valign="top" style="text-align:justify;"><font face="Arial,Helvetica,sans-serif" size="1" color="#333333"><span style="font-size:12px;"><b>Name of Facility:</b></span></font></td>
                                    <td align="left" valign="top" style="text-align:justify;"><font face="Arial,Helvetica,sans-serif" size="1" color="#333333"><span style="font-size:12px;">wee</span></font></td>
                                </tr>
                            </tbody>
                        </table>
                    </span>
                </font>
            </div>
        </td>
        </tr>
        <tr style="text-align:justify;">
            <td valign="top">
                <font face="Arial,Helvetica,sans-serif" size="1" color="#333333"><span style="font-size:12px;">Thank you,</span></font>
                <br>
                <font face="Arial,Helvetica,sans-serif" size="1" color="#333333"><span style="font-size:12px;">Admin</span></font>
            </td>
        </tr>
    </tbody>
</table>

所以我想保持一致，因为它只是移动＆＃34;谢谢你，管理员＆＃34;部分到小顶部

enter image description here

我正在研究电子邮件模板，所以内联CSS

Answer 1

你有cell-padding table属性，将其更改为0然后通过css设计你的表

Answer 2

我认为这就是你需要的

<table width="100%" border="0" cellspacing="0" style="width:100%;padding-left:20px;">

DEMO：http://jsfiddle.net/MX9TF/3/

Answer 3

删除一些空div，并通过清理标记来删除br。 http://jsfiddle.net/MX9TF/8/

<table>
    <tbody>
        <tr>
            <td>
                <p>Hello,
                    <br/>Following contact form has been submitted.</p>
                <table>
                    <tbody>
                        <tr>
                            <th>Name :</th>
                            <td>pratik</td>
                        </tr>
                        <tr>
                            <th>Email :</th>
                            <td><a href="redir.aspx?C=QoTsFntNs06IpxOuMMbFYRtQzW2GF9EIuKkNMxEh-PRF-3FywVp943MT2lFJlCHlMFKl71eLJAk.&amp;URL=mailto%3ap%40d.com" target="_blank">p@d.com</a>

                            </td>
                        </tr>
                        <tr>
                            <th>Phone :</th>
                            <td>8</td>
                        </tr>
                        <tr>
                            <th>Name of Facility:</th>
                            <td>awee</td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
        <tr>
            <td>
                <p>Thank you,
                    <br/>Admin</p>
            </td>
        </tr>
    </tbody>
</table>

table {
    font-family:"Arial,Helvetica,sans-serif";
    font-size:12px;
    color:#333;
    width:100%;
    text-align:justify;
}
table table th {
    width:17%;
    font-weight:bold;
}

然后，您可以使用纯CSS从样式表调整和设置表格。：）

Answer 4

<td style="padding-top: 1px" valign="top">

另外，你可以在问题中提到不允许使用css，这样我们就不会这么想了

还有一件值得一提的事。您可以使用Firefox中的Firebug等一些开发工具来解决这个问题。例如，在浏览器中打开您的HTML代码，使用firebug inspect来选择您的块，并显示您的最终td空间很大。您还可以尝试使用firebug工具在运行时编辑。它是一个firefox插件。如果你没有firefox，其他浏览器也有类似的开发工具

Answer 5

快速回答是从父表中删除cellpadding="20"并在每个单元格上使用填充或<br> 。 cellpadding和cellspacing应仅用于清零，因为它们不会在所有客户端中一致地呈现。

您的代码中还有一大堆您不需要的小东西。以下是它的外观 - 这将在所有电子邮件客户端中100％运行：

<table width="100%" border="0" cellspacing="0" cellpadding="0" style="width:100%;">
  <tr>
    <td valign="top" style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #333333; padding-bottom:30px;">
      Hello,
      <br><br>
      Following contact form has been submitted.
    </td>
  </tr>
  <tr>
    <td>
      <table width="100%" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td valign="top" width="17%" style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #333333; padding-bottom:10px;">
            <b>Name:</b>
          </td>
          <td valign="top" width="83%" style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #333333; padding-bottom:10px;">
            pratik
          </td>
        </tr>
        <tr>
          <td valign="top" width="17%" style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #333333; padding-bottom:10px;">
            <b>Email:</b>
          </td>
          <td valign="top" width="83%" style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #333333; padding-bottom:10px;">
            <a href="p@d.com" style="color: #000001; font-weight: bold; text-decoration: none;">p@d.com</a>
          </td>
        </tr>
        <tr>
          <td valign="top" width="17%" style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #333333; padding-bottom:10px;">
            <b>Phone:</b>
          </td>
          <td valign="top" width="83%" style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #333333; padding-bottom:10px;">
            #
          </td>
        </tr>
        <tr>
          <td valign="top" width="17%" style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #333333; padding-bottom:10px;">
            <b>Name of Facility:</b>
          </td>
          <td valign="top" width="83%" style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #333333; padding-bottom:10px;">
            ...
          </td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td valign="top" style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #333333; padding-top:10px;">
      Thank you,<br>
      Admin
    </td>
  </tr>
</table>

如何减少2 TR表之间的差距？

5 个答案: