Show /hide table rows but

Question

If someone can help: Try to hide/show some rows in a HTML table, setting the style display:none or display:block attributes in some table rows. The problem is that if I set the display:block, seems to every data in one column, the expanded rows are lost the width of the table cells.

It is currently Firefox browser.

The toggle script is:

<script language="javascript">
  function toggle_it(itemID){   
  // Toggle visibility between none and inline
 var Nondisp = document.getElementsByClassName(itemID) 
 for( var i=0; i < Nondisp.length ; i++) 
{
  if ((Nondisp[i].style.display == 'none'))   
    {                                                              
     Nondisp[i].style.display = 'block';     
      } else {                                                     
      Nondisp[i].style.display = 'none';      
      }                                                            
  }                                                                
  }                                                                
</script>

score 0 · Answer 1 · edited May 23 '17 at 10:25

0

Check out the difference between Display:None and Visibility:Hidden at: What is the difference between visibility:hidden and display:none?

Setting visibility to hidden should still allocate the room in your table where your current setting of display:none completely removes the item from layout considerations.

edited May 23 '17 at 10:25

Community

1
1

answered Jun 06 '13 at 17:09

nvuono

3,323
26
27

Hi Thank you with visibility:collapse and visible working as I wanted , Thank you again – user2460547 Jun 07 '13 at 06:58

score 0 · Answer 2 · answered Jun 23 '14 at 19:52

0

Use table-row instead of block.

answered Jun 23 '14 at 19:52

Ole Sørensen

349
5
19

Show /hide table rows but

2 Answers2