For some reason the image I have covers all but 1 pixel of the entire table (marked with red) and that ruins the whole design of the page, any idea what can I do to fix it?

```css
table,
td,
th {
  border-color: transparent;
}
td.Image {
  color: white;
  position: relative;
}
td.Image img {
  width: 100%;
  display: table;
  pointer-events: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
div.Text {
  background-color: rgba(0, 0, 0, 0.7);
  position: absolute;
  bottom: 0;
  width: 100%;
  display: table;
}
```

```html
<table width="50%">
  <tr>
    <th height="120px" colspan="4" align="left" bgcolor="ffffff"><font size="8">Title</font>
    </th>
  </tr>
  <tr bgcolor="red">
    <td class="Image" height="auto" width="25%" align="left">
      <img src="https://support.files.wordpress.com/2009/07/pigeony.jpg?w=688">
      <div class="Text"><font size="4"><b>Text<br>goes here</b></font>
      </div>
    </td>
  </tr>
</table>
```