发表新帖
发表新帖

extra white space between tables in html email for gmail client

后端 未结
关注
9 1737
梦如初夏
梦如初夏 2021-02-07 16:06

My code is at

http://jsfiddle.net/user1212/G86KE/4/

The problem is in gmail it leaves an extra white space between 2 tables inside the same cell. I have tried

相关标签:
9条回答
  • 夕颜
    2021-02-07 16:39

    display:block worked great for the gap problem between my body and footer, but it didn't do anything for my header; neither did the other fixes. I know this is an old thread, but in case anyone stumbles across it and the above didn't help, this did it for me:

    Add style="line-height:1px; font-size:0.0em;" to the <td> tag which contains your header table.

    You might have to try a couple of different tags to find the right one, but it's another solution to try.

    0 讨论(0)
  • 谎友^
    2021-02-07 16:40

    Using style="display:block" in the image tag should work. Also, don't forget to add it to the spacer image if you're using that.

    0 讨论(0)
  • 闹比i
    2021-02-07 16:40

    Besides adding display:block to your img also add cellpadding="0" cellspacing="0" border="0" to your table (important: do not forget applying this to your wrapping table as well)

    Cheers

    0 讨论(0)
  • 没有蜡笔的小新
    2021-02-07 16:41

    Styling HTML mails is horrible.

    A few tips:

    border-spacing:0; /*this should fix the spacing problem*/

    You need to apply this to all the tables you are using, so you should include it in a <style> block at the top like so:

    <head>
  <style>
    table {border-spacing: 0;}
  </style>
</head>

    (sorry for the bad formatting, somehow the code refused to show up properly on multiple lines)

    0 讨论(0)
  • 感动是毒
    2021-02-07 16:43

    Well, I noticed the header's and body's content are actually tables inside another cell. Why don't you try to separate the header and body and move them on their separated row?

    Something like this:

    <table border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td>
       <!-- Header table -->
    </td>
  </tr>

  <tr>
    <td>
       <!-- Body table -->
    </td>
  </tr>
</table>

    Also, just a tip, don't use <center> tag to center stuff. If you're inside a table cell, just use align="center". This, also, applies to the whole table, so in order to center a table, just set the align property to center.

    0 讨论(0)
  • 借酒劲吻你
    2021-02-07 16:44

    simply add

    table{ 
font-size:0em;
border-collapse: collapse;
}

    it will solve your problem

    0 讨论(0)
 看不清?
提交回复
热议问题