How to get ride of extra height in table

Question

see example below. I am trying to let the image occupy the whole image. But as you can see, there are still some background color showing. Any ideas to fix it? Thanks in advance!

Update: I am trying to do it on email html. So display:block solution doesn't fit though.

<table border="0" cellpadding="0" cellspacing="0">
  <tbody>
    <tr>
      <td border="0" cellpadding="0" cellspacing="0" style="background-color:yellow;">
        <img src="http://3.bp.blogspot.com/-oj_EN3P5Fjw/UR0AFZ_e-rI/AAAAAAAAAEE/vKTPlEEhzoY/s640/gnome.png">
      </td>
    </tr>
  </tbody>
</table>

Aha, it's a duplicate as the question -- By using, `line-height:0px;` It works! — Haoyu Chen, Feb 28 '18 at 01:12

score 0 · Answer 1 · answered Feb 28 '18 at 01:05

.whole img {display: block;}

<table border="0" cellpadding="0" cellspacing="0">
  <tbody>
    <tr>
      <td border="0" cellpadding="0" cellspacing="0" style="background-color:yellow;" class = 'whole'>
        <img src="http://3.bp.blogspot.com/-oj_EN3P5Fjw/UR0AFZ_e-rI/AAAAAAAAAEE/vKTPlEEhzoY/s640/gnome.png"  >
      </td>
    </tr>
  </tbody>
</table>

How to get ride of extra height in table

1 Answers1