stacktable.js icon indicating copy to clipboard operation
stacktable.js copied to clipboard

Tables with multi-level headers

Open pirex360 opened this issue 7 years ago • 0 comments

Thanks for the lovely js lib. In a multi level header table, your js dont work very well... see this example.

Normal Table screen shot 2018-05-19 at 20 06 09

Responsive Table screen shot 2018-05-19 at 20 06 29

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 -->

pirex360 avatar May 19 '18 19:05 pirex360