stacktable.js
stacktable.js copied to clipboard
Tables with multi-level headers
Thanks for the lovely js lib. In a multi level header table, your js dont work very well... see this example.
Normal Table

Responsive Table

See the Main Header Textile, with the subheader Towel and Tape appears on normal table, but in responsive mode, the table outputs bad data.
Here is my table:
<div id="ctype" class="lastChild">
<table cellspacing="0" cellpadding="0" class="tabelas responsive">
<caption class="firstChild">Type C (Shore D Hardness 25)</caption>
<tbody class="lastChild"><tr class="firstChild">
<th rowspan="2" class="firstChild">Base</th>
<th rowspan="2">Description</th>
<th rowspan="2">Total plate thickness<br class="firstChild lastChild empty">(mm)</th>
<th rowspan="2">Relief depth<br class="firstChild lastChild empty">(mm)</th>
<th colspan="2">Textile</th>
<th rowspan="2" class="lastChild">Advantage</th>
<tr>
<th class="firstChild">Towel</th>
<th class="lastChild">Tape</th>
</tr>
<tr class="lastChild">
<td class="area_blue firstChild">Film</td>
<td>CF200GB</td>
<td>2.00</td>
<td>1.78</td>
<td><span class="tablegood"><i class="fa fa-star" aria-hidden="true"></i><i class="fa fa-star" aria-hidden="true"></i><i class="fa fa-star" aria-hidden="true"></i><i class="fa fa-star" aria-hidden="true"></i></span></td>
<td><span class="tablegood"><i class="fa fa-star" aria-hidden="true"></i><i class="fa fa-star" aria-hidden="true"></i><i class="fa fa-star" aria-hidden="true"></i><i class="fa fa-star" aria-hidden="true"></i></span></td>
<td class="lastChild">2mm Rubber support<br class="firstChild lastChild empty">Heat-resistant</td>
</tr>
</tbody></table>
</div>
<!-- /ctype -->