使用Materialisecss创建Accordion表

时间:2015-12-22 10:45:15

标签: html css materialize

我试图重新创建this question,除非使用materalize css这样做。

Materalizecss Collapsible看起来应该很容易实现为表格格式,尽管我不知道该怎么做。

如果有人能提供一个很棒的工作示例。

我试图创建一个非常小的Jsfiddle example也无济于事。

<table class="striped">
  <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 class="collapsible" data-collapsible="accordion">
    <tr class="collapsible-header">
      <td>Alvin</td>
      <td>Eclair</td>
      <td>$0.87</td>
    </tr>
    <tr class="collapsible-body">
      <td>Alan</td>
      <td>Jellybean</td>
      <td>$3.76</td>
    </tr>
  </tbody>
</table>

1 个答案:

答案 0 :(得分:0)

这已经过时了,但是其他任何人都在想。

MaterialiseCSS 0.97.7正在寻找:

(> li > .collapsible-header)
(> li > .collapsible-body)

不确定如何让标题排成一行,但这是我为测试所做的:https://jsfiddle.net/1cq8wd4p/