Visibility hidden removes background color in a table [duplicate]

Question

I am building an app and I have a table dynamically created.

The table rows are created as follows

<tr style="background-color: #71aa9a;">
  <td></td>
  .
  . 
  .
  <td></td>
<tr/>

And some of the td's are hidden during creation .

The problem that arises is that when a td is invisible (visibility:hidden) the background color of tr is disappeared and is white instead.

Can someone explain me why and how can i solve it ?

I dont want to use display:none; due to the need of specific td's in a row.

Answer 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>

Answer 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>