If I've understood correctly you are looking for visibility: collapse; declaration:
17.5.5 Dynamic row and column effects
The visibility
property takes the value collapse
for row, row
group, column, and column group elements. This value causes the entire
row or column to be removed from the display, and the space normally
taken up by the row or column to be made available for other content.
Contents of spanned rows and columns that intersect the collapsed
column or row are clipped. The suppression of the row or column,
however, does not otherwise affect the layout of the table. This
allows dynamic effects to remove table rows or columns without forcing
a re-layout of the table in order to account for the potential change
in column constraints.
However it seems this is buggy on some of web browsers. The MDN states:
The support for visibility:collapse
is missing or partially incorrect
in some modern browsers. In many cases it may not be correctly treated
like visibility:hidden
on elements other than table rows and columns.
Unfortunately it acts as visibility: hidden
on Chrome37: Demo Here.
But fortunately, you can fake the effect by line-height: 0 declaration:
Updated Demo
.hidden {
visibility: collapse;
line-height: 0; /* Set the height of the line box to 0
in order to remove the occupied space */
}