How to hide HTML <tr> table row so that it does not take up space?

Question

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

Answer 1

I would really like to see your TABLE style. For example. "Border collapse"

Just guess, but this may affect how hidden lines are displayed.

Answer 2

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

Answer 3

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

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

Answer 4

If display: none; not working, how about setting height: 0; instead of this? In combination with a negative mark (equal to or greater than the height of the upper and lower borders, if any) to further remove the element? I do not think position: absolute; top: 0; left: -4000px; position: absolute; top: 0; left: -4000px; will work, but maybe worth a try.

For my part, using display: none works fine.

Answer 5

I had the same problem, I even added style = "display: none" to each cell.

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

Answer 6

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

I forget who does this. I think this is linear height for IE6.

Answer 7

This happened to me, and I was puzzled by why. Then I noticed that if I removed nbsp; I had inside the lines, then the lines did not take up space.

Answer 8

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

Answer 9

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

works great for me.

Answer 10

You need to put the input type change in a hidden one, all its functions work, but it does not appear on the page

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

while the input type is set up so that you can change the rest. Good luck

Answer 11

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; } 

Answer 12

I had the same problem and solved the problem. Css used to be crowded: hidden; Z-index: 999999;

I change it to overflow: visible;

Answer 13

You can set

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

Answer 14

position: absolute will remove it from the layout stream and solve your problem - the element will remain in the DOM, but will not affect others.