AlexTCGPro AlexTCGPro - 5 months ago 19
CSS Question

How can I make an image cover a table cell completely?

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?



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

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




Answer

Just add padding:0px; in

table,
td,
th {
    border-color: transparent;
    padding:0;
}

table,
td,
th {
  border-color: transparent;
  padding:0;
}
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;
}
<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>