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

【问题标题】：How to Reduce gap between 2 TR of table?如何减少表的 2 个 TR 之间的差距？
【发布时间】：2014-04-27 10:42:05
【问题描述】：

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

所以我想保持所有对齐，只需移动“谢谢， Admin”部分到小顶部

我正在处理电子邮件模板，所以内联 CSS

【问题讨论】：

一团糟……我的眼睛现在在燃烧……谢谢。
我正在处理电子邮件模板，所以内联 CSS
这仍然是absolute 混乱。

标签： css html-table html-email newsletter

【解决方案1】：

你有单元格填充表格属性，将其更改为 0，然后通过 css 设计你的表格

【讨论】：

@user3416398 允许使用 CSS，但不允许使用外部样式表。您可以使用样式标签，但应该为 Gmail 内联任何内容。

【解决方案2】：

我想这就是你需要的

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

演示：http://jsfiddle.net/MX9TF/3/

【讨论】：

【解决方案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 从样式表调整和设置表格样式。 :)

【讨论】：

oki，刚刚发现，这是用于电子邮件目的。所以属性当然是方式。

【解决方案4】：

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

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

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

【讨论】：

【解决方案5】：

快速的答案是从父表中删除cellpadding="20"，并在每个单元格上使用填充或<br>&nbsp;。 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>

【讨论】：