MaterialCSS Table手风琴

时间:2016-11-08 19:43:19

标签: html css materialize

我正在尝试使用材质css在我的桌子中创建一个手风琴效果。他们确实有一个collapsible课程。然而,使用表格并不能给我带来理想的效果。代码:( CODEPEN

<table>
        <thead>
          <tr>
              <th data-field="id">Name</th>
              <th data-field="name">Item Name</th>
          </tr>
        </thead>
        <tbody>
          <tr>
          <td>
            <p class="table-metric-color">Alex</p>
          </td>
          <td>
            <ul class="collapsible" data-collapsible="accordion">
              <li>
                <a href="#" class="collapsible-header">Details</a>
                <p class="collapsible-body white"><code> Details here</code></p>
              </li>
            </ul>
          </td>
        </tr>
        </tbody>
      </table>

我的目标是this,我使用bootstrap css。有没有办法使用材料css复制它?

1 个答案:

答案 0 :(得分:1)

您应首先包含jquery,并按以下方式初始化可折叠:

AppointmentService.getAppointmentObject(req.params.id)
    .then((response) => {
        sails.hooks.http.app.render('report', { appointment: response }, (err, html) => {
            if (err) return res.send(500, err);
            return res.send(200, html);
        })
    })
    .catch(err => res.status(err.status || 500).send(err.message));

http://codepen.io/anon/pen/XNmMLL?editors=1111