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

How can I hide an HTML table row <tr> so that it takes up no space? I have several <tr>'s set to style="display:none;", but they still affect the size of the table and the table's border reflects the hidden rows.

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.

You can use style display:none with tr to hide and it will work with all browsers.

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

is working perfectly for me..

Add some of the following line-height:0px;font-size:0px;height:0px;margin:0;padding:0;

I forget which one does it. I think it's line-height for IE6.

I was having the same issue, I even added style="display: none" to each cell.

In the end I used HTML comments <!-- [HTML] -->

This happened to me and I was baffled as to why. Then I noticed that if i removed any nbsp; i had within the rows, then the rows didn't take up any space.

I was having the exact same problem; I'm making a leaderboard thing that can display different difficulty highscores by pressing buttons.

But after screwing around for the better part of 2 hours, I found out some stuffs:

You can use this code to hide with a button press (JavaScript):

document.getElementById('mytr').style='display:none;';

Show with a button press:

document.getElementById('mytr').style='display:table-row;';

Start off hidden (To later bring back with button press):

<tr id='mytr'style='display:none;'>

Hope this helped!

P.S. You can also show & hide headers in a similar way, only to show the header instead of writing 'display:table-row;' you write 'display:table-header;'. This can also be used to change row into headers & headers into rows.

You need to put the change the input type to hidden, all the functions of it work but it is not visible on the page

<input type="hidden" name="" id="" value="">

as long as the input type is set to that you can change the rest. Good Luck!!

HTML:

<input type="checkbox" id="attraction" checked="checked" onchange="updateMap()">poi.attraction</input>

JavaScript:

function updateMap() {
     map.setOptions({'styles': getStyles() });
} 
    
function getStyles() {
    var styles = [];
    for (var i=0; i < types.length; i++) {
      var style = {};
      var type = types[i];
      var enabled = document.getElementById(type).checked;
      style['featureType'] = 'poi.' + type;
      style['elementType'] = 'labels';
      style['stylers'] = [{'visibility' : (enabled ? 'on' : 'off') }];
      styles.push(style);
    }
    return styles;
}

I was having same problem and I resolved the issue. Earlier css was overflow:hidden; z-index:999999;

I change it to overflow:visible;

position: absolute will remove it from the layout flow and should solve your problem - the element will remain in the DOM but won't affect others.

You can set

<table>
  <tr style="visibility: hidden"></tr>
</table>