Remove spacing between table cells and rows

Question

I'm designing an HTML email template, which forces me to use tables. In the code below, I'm having trouble (1) removing the spacing below the placeholder image and (2) removing the space between the image and the caption. Here's a screenshot of how it looks in Chrome 15 on OS X 10.6.8.:

enter image description here

<!DOCTYPE HTML>
<html>
<head>
    <title>Email Template</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
</head>
<body>
    <table style="border: 1px solid #b50b32; margin: 30px auto; width: 600px; padding: 0; border-spacing: none;" cellspacing="0" cellpadding="0">
        <tr>
            <td id="main" style="background-color: #f2f2f2;">
                <h2 style="color: #b50b32; font-family: 'Lucida Grande', Arial, sans-serif; font-size: 22px; font-weight: normal; padding: 15px; margin: 25px 0; background-color: #fff;">Major headline goes here</h2>
                <table class="main-story-image" style="float: left; width: 180px; margin: 0 25px 25px 25px;">
                    <tr><td style="padding: 0; border: 1px solid red;"><img src="placeholder.jpg" width="180" height="130" style="border: none; margin: 0; padding: 0;" alt="Placeholder" /></td></tr>
                    <tr><td style="padding: 0; border: 1px solid red;"><p class="image-caption" style="background-color: #bebebe; color: #333; font-family: 'Lucida Grande', Arial, sans-serif; margin: 0; padding: 5px;">Caption.</p></td></tr>
                </table><!--/.main-story-image-->
                <p style="margin: 0 50px 25px 25px;">Lorem ipsum dolor sit amet.</p>
                <p><a href="">Click here to read more </a></p>
                <div style="clear: both;"></div>
            </td><!--/#main-->
        </tr>
    </table>
</body>
</html>

The red borders are there only to show the outlines of the cells. I don't want them there in the final version.

I was able to fix problem (2) by adding cellspacing="0" and cellpadding="0" to the inner table element. However, the first problem persists. I can't figure out why there are extra pixels below the image in the same cell. Help? — Joe Mornin, Dec 12 '11 at 20:12
Hello @JoeMornin, I am facing same problem but the difference is that on desktop `tr` showing correctly but on mobile devices spacing showing between `tr` and I tried all which are mention here but not working for me. If you have any idea please share. — Vinaya Maheshwari, Sep 21 '16 at 07:31

Jukka K. Korpela · Answer 1 · 2023-02-09T04:08:20.960

80

Add border-collapse: collapse into the style attribute value of the inner table element. You could alternatively add the attribute cellspacing=0 there, but then you would have a double border between the cells.

I.e.:

<table class="main-story-image" style="float: left; width: 180px; margin: 0 25px 25px 25px; border-collapse: collapse">

edited Feb 09 '23 at 04:08

answered Dec 12 '11 at 19:18

Jukka K. Korpela

195,524
37
270
390

1

I think you misunderstood the question. The borders are just placeholders so I can see the outlines of the cells. The problem is that there is extra space below the image. – Joe Mornin Dec 12 '11 at 20:11
This did the trick as I also have: display: inline-block; inside table and padding: 1em; and border: 0.5px solid gray; inside td/th. – Harlin Nov 29 '19 at 22:18

score 65 · Accepted Answer · answered Dec 12 '11 at 20:35

65

It looks like the DOCTYPE is causing the image to display as an inline element. If I add display: block to the image, problem solved.

answered Dec 12 '11 at 20:35

Joe Mornin

8,766
18
57
82

1

But if we have multiple images within a td, it destroys this. – soham Mar 06 '13 at 10:45
2

Thank you, works perfect. To many people always suggest `border-collapse:collapse;` – djowinz Oct 11 '13 at 00:03

Petr Hladík · Answer 3 · 2018-01-30T19:56:36.113

17

I had a similar problem. This helps me across main email clients. Add:

attributes cellpadding="0", cellspacing="0" and border="0" to tables
style border-collapse: collapse; to tables
styles padding: 0; margin: 0; to each element
and styles font-size: 0px; line-height: 0px; to each element which is empty

edited Jan 30 '18 at 19:56

answered Jul 21 '17 at 15:08

Petr Hladík

527
6
8

For the sake of completness:In my case (I wanted to remove the spacing between [empty] cells), only the attributes were needed (in fact, only cellspacing='0'). All the styles did not change a thing, and after I added the attributes to the table tag, no styles were needed at all. Working in FF and Chrome. – randmin Jan 21 '19 at 05:08
1

Yes, this solution works in your case because you are solving the problem of removing spaces between cells in the HTML template displayed in browsers (not in e-mail clients). However, this issue solves the problem of removing spaces between the elements in an email template, so this issue is more complex than yours. – Petr Hladík Jan 21 '19 at 11:28
Very well observed. I did not realize that this question aims on email templates. My bad. – randmin Jan 26 '19 at 14:14

score 10 · Answer 4 · answered Dec 12 '11 at 18:33

10

You have cellspacing="0" twice, try replacing the second one with cellpadding="0" instead.

answered Dec 12 '11 at 18:33

ayyp

6,590
4
33
47

Taz · Answer 5 · 2020-04-14T19:09:52.870

If you see table class it has border-spacing: 2px; You could override table class in your css and set its border-spacing: 0px!important in table; I did it like

table {
      border-collapse: separate;
      white-space: normal;
      line-height: normal;
      font-weight: normal;
      font-size: medium;
      font-style: normal;
      color: -internal-quirk-inherit;
      text-align: start;
      border-spacing: 0px!important;
      font-variant: normal;   }

It saved my day.Hope it would be of help. Thanks.

score 6 · Answer 6 · edited Oct 02 '13 at 18:03

6

Nothing has worked. The solution for the issue is.

<style>
table td {
    padding: 0;
}
</style>

edited Oct 02 '13 at 18:03

Natan Streppel

5,759
6
35
43

answered Oct 02 '13 at 17:37

drupal

61
1
1

Old post but saved me some time, couldn't figure out what was causing that padding. Tnx! – ZassX Oct 18 '16 at 14:22

score 4 · Answer 7 · edited Oct 28 '15 at 21:13

4

Used font-size:0 in parent TD which has the image.

edited Oct 28 '15 at 21:13

Pbk1303

3,702
2
32
47

answered Jul 02 '15 at 08:20

Satish Upadhyay

93
5

score 2 · Answer 8 · answered Sep 13 '14 at 09:23

I had a similar problem and I solved it by (inline)styling the td element as follows :

<td style="display: block;">

This will work although its not the best practice. In my case I was working on a old template that had been styled using HTML tables.

score 1 · Answer 9 · edited Oct 28 '15 at 21:14

1

Put display:block on the css for the cell, and valign="top" that should do the trick

edited Oct 28 '15 at 21:14

Pbk1303

3,702
2
32
47

answered May 07 '13 at 15:43

user2115923

71
1
3

score 1 · Answer 10 · edited Oct 28 '15 at 21:14

1

Hi as @andrew mentioned make cellpadding = 0, you still might have some space as you are using table border=1.

edited Oct 28 '15 at 21:14

Pbk1303

3,702
2
32
47

answered Dec 12 '11 at 18:37

Vijay Kumar

63
1
10

score 0 · Answer 11 · answered Oct 03 '17 at 15:56

0

If the caption box is gray then you can try wrapping the image and the caption in a div with the same background color of gray---so a "div" tag before the "tr" tag...This will mask the gap because instead of being white, it will be gray and look like part of the gray caption.

answered Oct 03 '17 at 15:56

amhp

1

Putting a `
` between `` elements wouldn't be recommended
– DiskJunky Oct 03 '17 at 16:32

Remove spacing between table cells and rows

11 Answers11

Linked

Related