How can I hide an HTML table row <tr> so that it takes up no space?

Question

Can you include some code? I add style="display:none;" to my table rows all the time and it effectively hides the entire row.

You can set <tr id="result_tr" style="display: none;"> and then show it back with JavaScript:

var result_style = document.getElementById('result_tr').style;
result_style.display = 'table-row';

I would really like to see your TABLE's styling. E.g. "border-collapse"

Just a guess, but it might affect how 'hidden' rows are being rendered.

Thought I'd add to this a potential other solution:

<tr style='visibility:collapse'><td>stuff</td></tr>

I've only tested it on Chrome but putting this on the <tr> hides the row PLUS all the cells inside the row still contribute to the widths of the columns. I will sometimes make an extra row at the bottom of a table with just some spacers that make it so certain columns can't be less than a certain width, then hide the row using this method. (I know you're supposed to be able to do this with other css but I've never gotten that to work)

Again, I'm in a purely chrome environment so I have no idea how this functions in other browsers.

If display: none; doesn't work, how about setting height: 0; instead? In conjunction with a negative margin (equal to, or greater than, the height of the top and bottom borders, if any) to further remove the element? I don't imagine that position: absolute; top: 0; left: -4000px; would work, but it might be worth a try.

For my part, using display: none works fine.