title: How to have multiple collapsable rows in bootstrap?
body: <p>I currently have a table with multiple rows. I was wondering if there is a way to collapse several rows (i.e. BMW, Toyota, and Honda) under the first row (i.e. cars) with out remove the "colspan" spacing. All the example I have seen seems like you have to lose the formatting of the collapsed rows.</p>
  
  <pre><code>&lt;table class="table table-sm table-hover"&gt;
  &lt;thead class="thead-inverse"&gt;
  
  &lt;thead&gt;
      &lt;tr&gt;
          &lt;th colspan="6"&gt;&lt;/th&gt;
          &lt;th colspan="3"&gt;Current Month&lt;/th&gt;
          &lt;th colspan="3"&gt;Year-to-Date&lt;/th&gt;
      &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;
      &lt;tr data-toggle="collapse" data-target="#cars" class="accordion-toggle"&gt;
          &lt;th colspan="6"&gt;Cars&lt;/th&gt;
          &lt;td colspan="3"&gt;456 mi&lt;/td&gt;
          &lt;td colspan="3"&gt;700 mi&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="hiddenRow"&gt;&lt;div class="accordian-body collapse" id="cars"&gt;
          &lt;td colspan="1"&gt;&lt;/td&gt;
          &lt;td colspan="5"&gt;Toyota&lt;/td&gt;
          &lt;td colspan="3"&gt;534 mi&lt;/td&gt;
          &lt;td colspan="3"&gt;800 mi&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;th colspan="1"&gt;&lt;/th&gt;
          &lt;th colspan="5"&gt;Honda&lt;/th&gt;
          &lt;td colspan="3"&gt;600 mi&lt;/td&gt;
          &lt;td colspan="3"&gt;770 mi&lt;/td&gt;
      &lt;/tr&gt;
      &lt;/div&gt;
  &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>