title: How do I collapse a table row in Bootstrap?
body: <p>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:</p>
  <pre class="lang-html prettyprint-override"><code>    &lt;!DOCTYPE html&gt;
      &lt;html lang=&quot;en&quot;&gt;
          &lt;head&gt;
              &lt;meta charset=&quot;utf-8&quot;&gt;
              &lt;title&gt;Collapse test&lt;/title&gt;
              &lt;link href=&quot;css/bootstrap.css&quot; rel=&quot;stylesheet&quot;&gt;
              &lt;script src=&quot;js/jquery.js&quot;&gt;&lt;/script&gt;
              &lt;script src=&quot;js/bootstrap-collapse.js&quot;&gt;&lt;/script&gt;
          &lt;/head&gt;
          &lt;body&gt;
          
          &lt;table class=&quot;table table-bordered table-striped&quot;&gt;
              &lt;tr&gt;
                  &lt;td&gt;
                    &lt;button type=&quot;button&quot; class=&quot;btn&quot; data-toggle=&quot;collapse&quot; data-target=&quot;#collapseme&quot;&gt;
                      Click to expand
                    &lt;/button&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;&lt;td&gt;&lt;div class=&quot;collapse out&quot; id=&quot;collapseme&quot;&gt;Should be collapsed&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt;
          &lt;/table&gt;
      &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>
  <p>This will correctly show and hide the contents of the row, but the collapsed row is still visible.  See this screenshot:</p>
  <p><img src="https://i.stack.imgur.com/C7sx7.png" alt="Collapsed row still visible" /></p>
  <p>The grey line in the screenshot shows the extra row.  What can I do to completely remove this row from view?</p>