CODEWITHSUNDEEP
htmlcsshtml-email
JWiley
JWiley

Reputation: 3219

Remove spacing between table rows

I've looked through many of the similarly titled questions regarding this issue, and tried many of the accepted answers but am still getting the unwanted row spaces. Like many of the questions, I'm making an email template so I have to use nested tables to get not only the structure I want, but for it to render properly in email.

The solutions I've tried that have not worked:

  1. cellspacing = 0
  2. cellpading = 0
  3. border-collapse: collapse
  4. border-spacing: 0
  5. margin: 0 0 0 0
  6. style="display: block" for my image

None of these seem to even make a difference, I can't get rid of the row spaces. This happens in 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>

Upvotes: 2

Views: 5884

Answers (2)

emmanuel
emmanuel

Reputation: 9615

You should prevent h1, h2 elements from margin collapsing.

h1, h2 {
  margin: 0;
}


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

Reference: Margin collapsing

Upvotes: 5

Faiz
Faiz

Reputation: 1019

Add margin: 0 to your h2. If you not define margin 0 the margin comes default with user agent stylesheets.

JSFiddle Link

https://jsfiddle.net/aLast0qs/

Css code

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

Upvotes: 1

Related Questions