如何在Angularjs-Materialize中使Table Row可折叠？

Question

我正在尝试使用<ul>和<li>在Angularjs-Materialize中实现可折叠行：

<ul class="collapsible" data-collapsible="accordion">
   <li>
      <table>
         <thead>
            <tr>
               <th data-field="id">Name</th>
               <th data-field="name">Item Name</th>
               <th data-field="price">Item Price</th>
            </tr>
         </thead>
         <tbody>
            <tr>
               <div class="collapsible-header"><p>abc
                  <td>Alan</td>
                  <td>Jellybean</td>
                  <td>$3.76</td>
               </div>
               <div class="collapsible-body">
               <p>a
               </div>
            </tr>
         </tbody>
      </table>
   </li>
</ul>

我没有得到正确的解决方案，因为可折叠物位于桌子上方且未与行对齐。 小提琴：https://jsfiddle.net/085ruvhx