Estou criando um programa de pagamento de boletos para os clientes da empresa pagarem. O estilo é baseado no Material Design (estou utilizando o Framework MaterializeCss). Uso uma table para mostrar todos os boletos dos últimos 2 anos.
O problema é que terá um botão de "Mais detalhes" que clicando, uma área embaixo ira se abir, igual um Collapsible (para mostrar observações do boleto, uma área de texto simples). Mas não dá pra colocar um Collapsible dentro de uma table. Vocês já tiveram algum problema parecido, ou alguma forma de como posso fazer isso?
Código que fiz ->
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container-fluid">
<div class="row valign-wrapper" style="background-color: #f3c71e;">
<div class="col s2 m2 l2 valign">
<i class="material-icons" style="font-size: 30px;
color: #ffffff;">menu</i>
</div>
<div class="col s8 m8 l8">
<h4 class="center-align" style="color: #ffffff;">Boletos</h4>
</div>
<div class="col s2 m2 l2 right-align">
<p style="color: #56b6c2;
font-size: 16px;
letter-spacing: 1px;">SAIR</p>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col s12 m12 l12">
<table class="bordered highlight">
<thead>
<tr>
<th data-field="id">Vencimento</th>
<th data-field="name">Número</th>
<th data-field="price">Ações</th>
</tr>
</thead>
<tbody>
<tr>
<td>10/01/2017</td>
<td>1593574268-63214</td>
<td><i class="material-icons orange-text" style="padding-right: 15px;">open_in_new</i><i class="material-icons blue-grey-text" style="padding-right: 15px;">pages</i><i class="material-icons cyan-text">expand_more</i></td>
</tr>
<tr>
<td>10/02/2017</td>
<td>3571596248-47896</td>
<td><i class="material-icons orange-text" style="padding-right: 15px;">open_in_new</i><i class="material-icons blue-grey-text" style="padding-right: 15px;">pages</i><i class="material-icons cyan-text">expand_more</i></td>
</tr>
<tr>
<td>10/03/2017</td>
<td>5248631798-47928</td>
<td><i class="material-icons orange-text" style="padding-right: 15px;">open_in_new</i><i class="material-icons blue-grey-text" style="padding-right: 15px;">pages</i><i class="material-icons cyan-text">expand_more</i></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>