How to remove space between table imgs

I'm having an issue with a space between images that I want to remove.

If you see there is a blank space between the images and I tried different ways to fix it. What I want is that the images are perfectly attached to each other.

img {
  float: left;
}

.line1 {
  content: url("https://via.placeholder.com/100");
}

.border1 {
  content: url("https://via.placeholder.com/100/000033");
}

<table style="display: flex;">
  <tr>
    <td>
      <img class="border1">
    </td>
    <td>
      <img class="line1">
    </td>
    <td>
      <img class="border1">
    </td>
    <td>
      <img class="line1">
    </td>
    <td>
      <img class="border1">
    </td>
  </tr>
</table>

How to remove space between table imgs

0 Answers