How do I collapse a table row in Bootstrap?

Question

I am using Bootstrap 2.3.2 in my app and I need to completely hide a row using the collapse plugin. Below is an example:

Answer 1

You just need to set the table cell padding to zero. Here's a jsfiddle (using Bootstrap 2.3.2) with your code slightly modified:

http://jsfiddle.net/marciowerner/fhjgn7b5/4/

The javascript is optional and only needed if you want to use a cell padding other than zero.

$('.collapse').on('show.bs.collapse', function() {
  $(this).parent().removeClass("zeroPadding");
});

$('.collapse').on('hide.bs.collapse', function() {
  $(this).parent().addClass("zeroPadding");
});

.zeroPadding {
  padding: 0 !important;
}

  
  
  



  

    

      

        Click to expand
      
    
    

      

        
Should be collapsed