How to remove margin between rows in a dynamically populated table?

I want that there is no margin between the rows in the second example. All rows should have the same margin as example 1. Please note that I dynamically fill those tables, so I don't know how many rows are filled in or not.

.marker-img-column {
  background-color: #ffffff;
  text-align: center;
  margin: 0;
  padding: 0 0 0 1em;
  width: 20em;
}

.marker-img {
  max-height: 300px;
  max-width: 400px;
  width: 275px;
  height: auto;
  margin: 0;
  padding: 0;
}

<html>
<h2>Everything is filled in</h2>
<table>
  <tr>
    <td colspan="3">
      Name1
    </td>
  </tr>
  <tr>
    <td>Materials Used:</td>
    <td>
      product 1, product 2, product 3
    </td>
    <td rowspan="10" class="marker-img-column"><img class="marker-img" src="https://fastly.picsum.photos/id/11/2500/1667.jpg?hmac=xxjFJtAPgshYkysU_aqx2sZir-kIOjNR9vx0te7GycQ" alt="Image marker name" /></td>
  </tr>
  <tr>
    <td>
      Compartment:
    </td>
    <td>
      Building
    </td>
  </tr>
  <tr>
    <td>Fire rating:</td>
    <td>
      EI120
    </td>
  </tr>
  <tr>
    <td>Compartment type:</td>
    <td>
      Wall
    </td>
  </tr>
  <tr>
    <td>Materials:</td>
    <td>
      Material 1, Material 2, Material 3
    </td>
  </tr>
  <tr>
    <td>Penetration size (W x H):</td>
    <td>
      40 x 50
    </td>
  </tr>
  <tr>
    <td>Pipe type / size:</td>
    <td>
      type / 50 mm
    </td>
  </tr>
  <tr>
    <td>Wall tickness:</td>
    <td>
      55 mm
    </td>
  </tr>
  <tr>
    <td>Installation date:</td>
    <td>
      21/09/2023
    </td>
  </tr>
  <tr>
    <td>Comments:</td>
    <td>
      comment 1, comment 2, comment 3
    </td>
  </tr>
</table>

<h2>Some values are filled in</h2>

<table>
  <tr>
    <td colspan="3">
      Name1
    </td>
  </tr>
  <tr>
    <td>Materials Used:</td>
    <td>
      product 1, product 2, product 3
    </td>
    <td rowspan="10" class="marker-img-column"><img class="marker-img" src="https://fastly.picsum.photos/id/11/2500/1667.jpg?hmac=xxjFJtAPgshYkysU_aqx2sZir-kIOjNR9vx0te7GycQ" alt="Image marker name" /></td>
  </tr>
  <tr>
    <td>
      Compartment:
    </td>
    <td>
      Building
    </td>
  </tr>
  <tr>
    <td>Installation date:</td>
    <td>
      21/09/2023
    </td>
  </tr>
</table>

</html>

Also a CodePen document: https://codepen.io/SDG6/pen/JjwMOyZ

Solution

In your second example, the table rows on the left grow proportionally to fill the minimum height dictated by the image on the right.

Here's an alternative, replacing the table with css-grid:

.grid {
  width: 700px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1em 8px;
}
.grid .heading {
  grid-area: 1 / 1 / 2 / 3;
}
.grid .image img {
  max-height: 300px;
  max-width: 400px;
  width: 275px;
  height: auto;
}
.grid .description {
  grid-area: 2 / 1 / 3 / 2
}
.grid .description {
  display: grid;
  grid-template-columns: auto 1fr;
  align-content: flex-start;
  gap: 0.25em 1ch;
}

<h2>Everything is filled in</h2>
<div class="grid">
  <div class="heading">Name1</div>
  <div class="image">
    <img class="marker-img" src="https://fastly.picsum.photos/id/11/2500/1667.jpg?hmac=xxjFJtAPgshYkysU_aqx2sZir-kIOjNR9vx0te7GycQ" alt="Image marker name" />
  </div>
  <div class="description">
    <span>Materials Used:</span>
    <span>product 1, product 2, product 3</span>
    <span>Compartment:</span>
    <span>Building</span>
    <span>Fire rating:</span>
    <span>EI120</span>
    <span>Compartment type:</span>
    <span>Wall</span>
    <span>Materials:</span>
    <span>Material 1, Material 2, Material 3</span>
    <span>Penetration size (W x H):</span>
    <span>40 x 50</span>
    <span>Pipe type / size:</span>
    <span>type / 50 mm</span>
    <span>Wall tickness:</span>
    <span>55 mm</span>
    <span>Installation date:</span>
    <span>21/09/2023</span>
    <span>Comments:</span>
    <span>comment 1, comment 2, comment 3</span>
  </div>
</div>

<h2>Some values are filled in</h2>

<div class="grid">
  <div class="heading">Name1</div>
  <div class="image">
    <img class="marker-img" src="https://fastly.picsum.photos/id/11/2500/1667.jpg?hmac=xxjFJtAPgshYkysU_aqx2sZir-kIOjNR9vx0te7GycQ" alt="Image marker name" />
  </div>
  <div class="description">
    <span>Materials Used:</span>
    <span>product 1, product 2, product 3</span>
    <span>Compartment:</span>
    <span>Building</span>
    <span>Installation date:</span>
    <span>21/09/2023</span>
  </div>
</div>