fancytree ext-table: how to have a fixed header row

Question

How can I stop the heading row on a fancytree table from scrolling - allowing only the data rows to scroll?

Here's the HTML I'm using.

        <div id="scrollParent_history" style="height: 420px; overflow: auto;">
            <table id="lb_tree_bliss_history" class="lb_report_tree">
                <colgroup>
                    <col width="175px">
                    <col width="20px">
                    <col width="20px">
                    <col width="20px">
                    <col width="20px">
                    <col width="20px">
                    <col width="20px">
                </colgroup>
                <thead>
                  <tr> <th>Date</th> <th>First</th> <th>max</th> <th>Min</th> <th>Final</th> <th>Activities</th> <th>Change</th>  </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>

score 1 · Accepted Answer · answered Nov 27 '16 at 17:01

1

Fancytree does not do anything special with the table headers, so you can probably use any existing jQuery fixed table header plugin.

(Note: it may be worth it to check the project page every know and then, since this functionality may become a native Fancytrtree extension some time.)

answered Nov 27 '16 at 17:01

mar10

14,320
5
39
64

Thanks @mar10 ... I've now sorted it out. I appreciate your help - I have +1 it but it won't show as I don't have enough rep as yet. Hence this comment. – Living Bliss Nov 29 '16 at 02:05

MeterLongCat · Answer 2 · 2017-02-22T03:17:44.677

0

In case it helps anyone I'm using floatThead which works nicely with fancytree 2.21.0. Available on GitHub http://mkoryak.github.io/floatThead/

Add the JavaScript library, then it's a one-liner

$('table').floatThead({
    position: 'auto'
});

edited Feb 22 '17 at 03:17

answered Feb 22 '17 at 00:35

MeterLongCat

228
2
11

fancytree ext-table: how to have a fixed header row

2 Answers2