My current scenario is similar to the one demonstrated in this jsfiddle link: http://jsfiddle.net/n5s53v32/6/
This is my HTML:
<table>
<tr>
<td>td 1</td>
<td>td 2</td>
<td class="last">td 3</td>
</tr>
<tr class="bg">
<td>td 1</td>
<td class="hide">td 2</td>
<td class="last">td 3</td>
</tr>
<tr>
<td>td 1</td>
<td>td 2</td>
<td class="last">td 3</td>
</tr>
</table>
Here is my CSS:
.bg{background: red; }
.hide{visibility:hidden; }
In Chrome browser, if child cells (td) of a tr are set invisible, then the background color of the parent tr in the invisible portion does not work. However, it works fine in Firefox.
Edit: The JS fiddle has been updated and can be viewed here: http://jsfiddle.net/n5s53v32/11/