Visibility Hidden Removes Background Color In A Table

I am building an app and I have a table dynamically created. The table rows are created as follows . .

Solution 1:

I'm sorry I don't have a more definitive explanation about the issue, but the fact is that background properties on <tr> elements are finicky. If I was you I'd just wrap cell content in a <div> and do visibility: hidden on that instead.

<tr>
  <td><div style="visibility: hidden">You dont see me!</div></td>
  <td>etc.</td>
</tr>

Solution 2:

Okay, I'd use trick using mainly font-size: 0, which will make content invisible, unselectable. Styles for all inner elements (>*) are here to overwrite default values.

Snippet

tr {
  background: red;
}

.hidden,
.hidden>* {
  font-size: 0;
  height: 0;
  width: 0;
  margin: 0;
  border: 0;
  background: transparent;
}

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td class="hidden"><button onclick="">Smith</button></td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>