html - Hiding a <tr>, while still involving it in width calculations

Question

There are search results stored in a table like the one below:

<table>
    <tbody>
        <tr>
            <td>Column One</td>
            <td>Column Two</td>
            <td>Column Three</td>
        </tr>
    </tbody>
</table>

The actual table contains much more data (both in columns and rows) and is fluid width. Since the data is variable, I would like the table-layout to remain auto, because it handles autoresizing (which would be expensive and complicated to do in javascript for say 1,000 rows).

This table is also filtered by a live search widget which hides rows that do not match the query by adding display: none;. However, I have found that this often causes the column widths to be recalculated (often causing some jarring jumps in column width). This makes sense, given that rows are likely only included calculations if they have display: table-row;. But this is not the behavior I am after.

Is it possible to hide a <tr> from view, but still have it included in column widths calculations done (on resize, for example) by the browser on a table with table-layout: auto;?

I've tried setting height: 0; (and max-height: 0;), but have learned from other SO questions that this does not work because of display: table-cell;. Similarly, Setting line-height: 0; failed, but I figured it would since a few of my columns have block content.

I've also considered explicitly setting widths on the <td>s, but then this makes keeping the table fluid (I would have to remove the explicit widths on resize, which could cause width jumps, and wouldn't work unless all of the rows were visible and included in the browser's table resize calculation).

Edit: To clarify, by hide from view I mean hide as in the sense of display: none;, not visibility: hidden;. The latter of which would work if the element did not retain it's original height when hidden, but unfortunately this is not the case.

Note: I know that upon first glance this appears to be a pretty narrowly applicable question, but I believe that this could be a common use case. As such, I've bolded the most applicable part (read: most important) of the question. The rest (which is slightly specific to me) is more explanatory than anything else.

Answer 1

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 */
}