过渡不适用于表格元素（tbody，tr）？

Question

我一直在玩Bootstrap崩溃和其他可能的手风琴效果。我试图通过转换在table行上实现手风琴效果。但不知何故，转换不适用于tbody或tr。

以下是我提出的一个示例 - http://jsfiddle.net/zw9fjvh0/ 我已经在Stackoverflow上查看了关于表和手风琴效果的大部分链接，但是没有找到任何正确的链接。

相关代码段：

function customCollapse(that) {
  $(that).next('tbody').toggleClass('closed');
}

.slider {
  overflow-y: hidden;
  /*max-height: 500px;*/
  /* approximate max height */
  display: table-row-group;
  transition-property: all;
  transition-duration: 5s;
  transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
}
.slider.closed {
  /*max-height: 0;*/
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<table>
  <thead id="tableHead" style="display:none;"></thead>
  <tbody id="tBody1" style="word-wrap: break-word" onclick="customCollapse(this);">
    <tr>
      <td>Some data</td>
    </tr>            
    <tr>
      <td>Some data</td>
    </tr>
  </tbody>
  <tbody id="tbody2" style="word-wrap: break-word;" class="slider">
    <tr>
      <td>Some data again</td>
    </tr>
    <tr>
      <td>Some data again</td>
    </tr>            
  </tbody>
</table>

我尝试使用Bootstrap的一些相关代码：

<tr data-toggle="collapse" data-target=".collapsibleContent" >                
    <td>Some data</td>
</tr>
<tr class="collapse collapsibleContent">
    <td>Some data again</td>
    <td>Some data again</td>
    <td>Some data again</td>
    <td>Some data again</td>
    <td>Some data again</td>
</tr>