删除表行之间的间距

时间:2015-04-14 15:10:13

标签: html css html-email

我已经浏览了许多关于这个问题的类似标题的问题,并尝试了许多已接受的答案,但仍然得到了不需要的行空间。像许多问题一样,我制作了一个电子邮件模板,因此我不得不使用嵌套表来获取我想要的结构,而是让它在电子邮件中正确呈现。

我尝试的解决方案没有奏效:

  1. cellspacing = 0
  2. cellpading = 0
  3. border-collapse:collapse
  4. border-spacing:0
  5. 保证金:0 0 0 0
  6. style =" display:block"为我的形象
  7. 这些似乎都没有任何区别,我无法摆脱行空间。这发生在Chrome / IE / Firefox中。

    enter image description here

    <html lang="en">
        <head>
            <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
            <title>
              Title
            </title>
            <style type="text/css">
            a:hover { text-decoration: none !important; }
            .header h1 {color: #055d90; font: normal 25px Georgia, Times, serif; margin: 0; font-weight: bold; padding: 0 0 0px 0; line-height: 39px; margin-top: 0;}
            .header p {color: #cf373e; font: normal 17px Georgia, Times, serif; margin: 0; padding: 0; line-height: 12px; font-style: italic;}
            .custinfo h1 {color: #FFFFFF; font: normal 25px Tahoma, Times, serif; background-color: #FF8000; padding: 10px 0 10px 0;}
            .custinfo h2 {color: #FFFFFF; font: normal 15px Tahoma, Times, serif; background-color: #707070; padding: 0 0 0 0;}
            .table {border-collapse: collapse;}
            .table td {margin: 0; padding: 0; display:block;}
            </style>
        </head>
        <body style="margin: 0; padding: 0;">
            <table align="left" width="100%" class="table">
                <tr>
                <!--header-->
                    <table class="table"  cellpadding="0" cellspacing="0" width="100%" style="border-collapse: collapse;  border-spacing: 0; margin-top: 0;">
                        <tr>
                            <td valign="top">
                                <img src="images/logo.gif" style="display: block; border: 0" alt="" width="200" height="100">
                            </td>                       
                        </tr>
                        <tr>
                            <td valign="top" align="middle" class="header" width="100%">
                                <h1>Order</h1>
                            </td>
                        </tr>
                    </table>
                    <table class="table" cellpadding="0" cellspacing="0" width="100%" style="border-collapse: collapse;  border-spacing: 0;">
                        <tr class="custinfo">
                            <td width="50%">
                                <h1>[DISTRIBUTOR NAME]</h1>                         
                            </td> 
                            <td align="middle">
                                <h1>[ORDER DATE]</h1>
                            </td>
                        </tr>                   
                    </table>
                    <table class="table" cellpadding="0" cellspacing="0" width="100%" style="border-collapse: collapse;  border-spacing: 0;">
                        <tr class="custinfo">
                            <td>
                                <h2>PO# [PO NUMBER]</h2>                                    
                            </td> 
                            <td >
                                <h2>Customer [COMPANY NAME]</h2>
                            </td>
                            <td >
                                <h2>Total Order [TOTAL ORDER]</h2>
                            </td>
                        </tr>
                        <tr class="custinfo" style="margin:0">
                            <td>
                                <h2>PO# [PO NUMBER]</h2>                                    
                            </td> 
                            <td>
                                <h2>Customer [COMPANY NAME]</h2>
                            </td>
                            <td>
                                <h2>Total Order [TOTAL ORDER]</h2>
                            </td>
                        </tr>
                    </table>
                </tr>
            </table>
        </body>
    </html>
    

2 个答案:

答案 0 :(得分:4)

您应该阻止边距折叠中的h1h2元素。

h1, h2 {
  margin: 0;
}

&#13;
&#13;
a:hover {
  text-decoration: none !important;
}
.header h1 {
  color: #055d90;
  font: normal 25px Georgia, Times, serif;
  margin: 0;
  font-weight: bold;
  padding: 0 0 0px 0;
  line-height: 39px;
  margin-top: 0;
}
.header p {
  color: #cf373e;
  font: normal 17px Georgia, Times, serif;
  margin: 0;
  padding: 0;
  line-height: 12px;
  font-style: italic;
}
.custinfo h1 {
  color: #FFFFFF;
  font: normal 25px Tahoma, Times, serif;
  background-color: #FF8000;
  padding: 10px 0 10px 0;
}
.custinfo h2 {
  color: #FFFFFF;
  font: normal 15px Tahoma, Times, serif;
  background-color: #707070;
  padding: 0 0 0 0;
}
.table {
  border-collapse: collapse;
}
.table td {
  margin: 0;
  padding: 0;
  display: block;
}
h1,
h2 {
  margin: 0;
}
&#13;
<table align="left" width="100%" class="table">
  <tr>
    <!--header-->
    <table class="table" cellpadding="0" cellspacing="0" width="100%" style="border-collapse: collapse;  border-spacing: 0; margin-top: 0;">
      <tr>
        <td valign="top">
          <img src="images/logo.gif" style="display: block; border: 0" alt="" width="200" height="100">
        </td>
      </tr>
      <tr>
        <td valign="top" align="middle" class="header" width="100%">
          <h1>Order</h1>

        </td>
      </tr>
    </table>
    <table class="table" cellpadding="0" cellspacing="0" width="100%" style="border-collapse: collapse;  border-spacing: 0;">
      <tr class="custinfo">
        <td width="50%">
          <h1>[DISTRIBUTOR NAME]</h1> 
        </td>
        <td align="middle">
          <h1>[ORDER DATE]</h1>

        </td>
      </tr>
    </table>
    <table class="table" cellpadding="0" cellspacing="0" width="100%" style="border-collapse: collapse;  border-spacing: 0;">
      <tr class="custinfo">
        <td>
          <h2>PO# [PO NUMBER]</h2> 
        </td>
        <td>
          <h2>Customer [COMPANY NAME]</h2>

        </td>
        <td>
          <h2>Total Order [TOTAL ORDER]</h2>

        </td>
      </tr>
      <tr class="custinfo" style="margin:0">
        <td>
          <h2>PO# [PO NUMBER]</h2> 
        </td>
        <td>
          <h2>Customer [COMPANY NAME]</h2>

        </td>
        <td>
          <h2>Total Order [TOTAL ORDER]</h2>

        </td>
      </tr>
    </table>
&#13;
&#13;
&#13;

参考:Margin collapsing

答案 1 :(得分:1)

为你的h2添加保证金:0。如果您没有定义保证金0,则保证金将默认使用用户代理样式表。

JSFiddle Link

https://jsfiddle.net/aLast0qs/

Css代码

.custinfo h2 {
  color: #FFFFFF;
  font: normal 15px Tahoma, Times, serif;
  background-color: #707070;
  padding: 0 0 0 0;
  margin: 0;
}