Stop table cells from overlapping HTML CSS

I am trying to set up a responsive table where each cell contains an image but with the code I have, the cells overlap.

Widths are set to 100% rather than fixed width so not sure why this is happening? The code that I have is below:

.infocard {
  position: relative;
  width: 100%;
  height: auto;
}

.infocard img {
  position: absolute;
  width: 100%;
}

.infocard .infocardimage {
  z-index: 9999;
  transition: opacity .5s ease;
  cursor: pointer;
}

.infocard:hover .infocardimage {
  opacity: 0;
}

.tableproperties {
  width: 100%;
  height: 50%;
}

<table class="tableproperties">
  <tbody>
    <tr>
      <td>
        <div class="infocard">
          <img alt="" class="infocardimage" src="https://animatedanatomy.com/images/16-9-dummy-image6.jpg" />
          <img alt="" class="infocardoverlay" src="http://barricadeprinters.com/wp-content/uploads/2018/10/16-9placeholder.png" />
        </div>
      </td>
      <td>
        <div class="infocard">
          <img alt="" class="infocardimage" src="https://animatedanatomy.com/images/16-9-dummy-image6.jpg" />
          <img alt="" class="infocardoverlay" src="http://barricadeprinters.com/wp-content/uploads/2018/10/16-9placeholder.png" />
        </div>
      </td>
    </tr>
    <tr>
      <td>
        <div class="infocard">
          <img alt="" class="infocardimage" src="https://animatedanatomy.com/images/16-9-dummy-image6.jpg" />
          <img alt="" class="infocardoverlay" src="http://barricadeprinters.com/wp-content/uploads/2018/10/16-9placeholder.png" />
        </div>
      </td>
      <td>
        <div class="infocard">
          <img alt="" class="infocardimage" src="https://animatedanatomy.com/images/16-9-dummy-image6.jpg" />
          <img alt="" class="infocardoverlay" src="http://barricadeprinters.com/wp-content/uploads/2018/10/16-9placeholder.png" />
        </div>
      </td>
      <td>
    </tr>
  </tbody>
</table>

I need the rows to not overlap when the screen is resized and the gap to not get bigger when the screen is made smaller.

Solution

The solution was to add the img + img selector into the css along with the accompanying html:

*{
  box-sizing:border-box;
}
.card {
  float: left;
  width: 33.33%;
  padding: 5px;
  position:relative;
}

/* Clearfix (clear floats) */
.row::after {
  content: "";
  clear: both;
  display: table;
}
.imageoverlay{
  display:none;
  position:absolute;
  left:0;
  top:0;
  width:100%;
  padding: 5px;
}
.card:hover img + img{
  display:block;
  
}

<div class="row">
  <div class="card">
    <img src="https://animatedanatomy.com/images/16-9-dummy-image6.jpg" alt="Snow" style="width:100%">
    <img class="imageoverlay" src="http://barricadeprinters.com/wp-content/uploads/2018/10/16-9placeholder.png" />
  </div>
  <div class="card">
    <img src="https://animatedanatomy.com/images/16-9-dummy-image6.jpg" alt="Forest" style="width:100%">
     <img class="imageoverlay" src="http://barricadeprinters.com/wp-content/uploads/2018/10/16-9placeholder.png" />
  </div>
  <div class="card">
    <img src="https://animatedanatomy.com/images/16-9-dummy-image6.jpg" alt="Forest" style="width:100%">
     <img class="imageoverlay" src="http://barricadeprinters.com/wp-content/uploads/2018/10/16-9placeholder.png" />
  </div>
</div>
<div class="row">
  <div class="card">
    <img src="https://animatedanatomy.com/images/16-9-dummy-image6.jpg" alt="Snow" style="width:100%">
     <img class="imageoverlay" src="http://barricadeprinters.com/wp-content/uploads/2018/10/16-9placeholder.png" />
  </div>
  <div class="card">
    <img src="https://animatedanatomy.com/images/16-9-dummy-image6.jpg" alt="Forest" style="width:100%">
     <img class="imageoverlay" src="http://barricadeprinters.com/wp-content/uploads/2018/10/16-9placeholder.png" />
  </div>
  <div class="card">
    <img src="https://animatedanatomy.com/images/16-9-dummy-image6.jpg" alt="Forest" style="width:100%">
     <img class="imageoverlay" src="http://barricadeprinters.com/wp-content/uploads/2018/10/16-9placeholder.png" />
  </div>
</div>