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><divstyle="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><tdclass="hidden"><buttononclick="">Smith</button></td><td>50</td></tr><tr><td>Eve</td><td>Jackson</td><td>94</td></tr></table>