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

Question

How can I hide an HTML table row  lt tr gt  so that it takes up no space   I have several  lt tr gt  s set to style  display none    but they still affect the size of the table and the table s border reflects the hidden rows

User · Answer

Thought I d add to this a potential other solution    lt tr style  visibility collapse  gt  lt td gt stuff lt  td gt  lt  tr gt   I ve only tested it on Chrome but putting this on the  lt tr gt  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

User · Answer

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   lt input type  hidden  name    id    value    gt    as long as the input type is set to that you can change the rest  Good Luck

User · Answer

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

User · Answer

HTML    lt input type  checkbox  id  attraction  checked  checked  onchange  updateMap    gt poi attraction lt  input gt    JavaScript   function updateMap          map setOptions   styles   getStyles           function getStyles         var styles           for  var i 0  i  lt  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

User · Answer

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

User · Answer

var result style   document getElementById  result tr   style  result style display         is working perfectly for me

User · Answer

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

User · Answer

I was having same problem and I resolved the issue  Earlier css was overflow hidden  z-index 999999   I change it to overflow visible

User · Answer

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

User · Answer

Can you include some code  I add style  display none   to my table rows all the time and it effectively hides the entire row

User · Answer

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

User · Answer

I was having the same issue  I even added style  display  none  to each cell   In the end I used HTML comments       lt  --  HTML  -- gt

User · Answer

You can set  lt tr id  result tr  style  display  none   gt  and then show it back with JavaScript   var result style   document getElementById  result tr   style  result style display    table-row

User · Answer

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

User · Answer

You can set                         lt table gt     lt tr style  visibility  hidden  gt  lt  tr gt   lt  table gt

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

Examples related to html

Examples related to css

Examples related to html-table