jQuery-ui手风琴在有多列的表上

Question

有一个相关问题here，但我没有足够的声誉来发表评论。

但这并未考虑多个列。

我为此创造了一个小提琴。 fiddle

<table>
<thead>
  <tr>
      <td>Category - 1</td>
      <td>Category - 2</td>
   </tr>
</thead>
<tbody class="category">
    <tr>
      <td>Category - 1</td>
      <td>Category - 2</td>
    </tr>
</tbody>
<tbody class="subcategory">
    <tr>
      <td>Sub Cateogry 1.1</td>
      <td>Sub Cateogry 1.2</td>
    </tr>
    <tr>
      <td>Sub Cateogry 1.3</td>
      <td>Sub Cateogry 1.4</td>
    </tr>
</tbody>
<tbody class="category">
   <tr>
     <td>Category - 3</td>
     <td>Category - 4</td>
   </tr>
</tbody>
<tbody class="subcategory">
   <tr>
     <td>Sub Cateogry 2.1.1</td>
     <td>Sub Cateogry 2.1.2</td>
   </tr>
   <tr>
     <td>Sub Cateogry 2.1.3</td>
     <td>Sub Cateogry 2.1.4</td>
   </tr>
</tbody>
</table>

所有'category'行都在第一列内，'thead'和'subcategory'行在外面。

我该如何做到这一点？