Fixed position table header relative to parent scrolling DIV element_问答_开发者

I need a fixed position thead that is static when the parent DIV element is scrolled.

I don't need a scrolling tbody element as the parent will take care of this.

Not fussed about IE6 support.

The HTML:

<div class="scroll">
    <form method="post" name="price_update" id="price_update" action="/">
        <table summary="A table displaying price quotes for 'product name'" class="pricing striped">
            <thead>
            <th> </th>
                <th> Date </th>
                <th> Commodity </th>
                <th width="6%"> Grade </th>
                <th class="text_center"> Terms </th>
                <th> Location </th>
                <th class="text_center"> Unit </th>
                <th> </th>
                <th> </th>
                <th class="text_center"> Price Range </th>
                <th> </th>
                <th> </th>
                <th class="text_center"> Type </th>
                <th> Frequency </th>
                <th> Measured </th>
                </thead>
            <tbody>
                <tr class="odd">
                    <th scope="row"> <input type="checkbox" checked="checked" title="" name="4010002" id="check4010002" class="styled quoteSelector">
                    </th>
                    <td> 23 Apr 10 </td>
                    <td><a href="/ICISDashboard/PriceReport/13415939">Benzene</a></td>
                    <td></td>
                    <td class="text_center"> CIF </td>
                    <td> Europe </td>
                    <td class="text_center"> USD/MT </td>
                    <td class="text_center"><span class="price_up"> Price movement indicator: Up </span></td>
                    <td class="text_center"> (+10.00) </td>
                    <td class="text_center"> 1125.00
                        - 1140.00 </td>
                    <td class="text_center"><span class="price_up"> Price movement indicator: Up </span></td>
             开发者_JAVA技巧       <td class="text_center"> (+15.00) </td>
                    <td class="text_center"><span title="Spot" class="tip_holder spot_quote"> SPOT </span></td>
                    <td></td>
                    <td> Closing value </td>
                </tr>
                <tr>
                    <th scope="row"> <input type="checkbox" title="" name="4010007" id="check4010007" class="styled quoteSelector">
                    </th>
                    <td> 23 Apr 10 </td>
                    <td><a href="/ICISDashboard/PriceReport/13415939">Benzene</a></td>
                    <td></td>
                    <td class="text_center"> CIF </td>
                    <td> Europe </td>
                    <td class="text_center"> USD/MT </td>
                    <td class="text_center"><span class="price_up"> Price movement indicator: Up </span></td>
                    <td class="text_center"> (+27.00) </td>
                    <td class="text_center"> 1107.00
                        - 1138.00 </td>
                    <td class="text_center"><span class="price_up"> Price movement indicator: Up </span></td>
                    <td class="text_center"> (+13.00) </td>
                    <td class="text_center"><span title="Spot" class="tip_holder spot_quote"> SPOT </span></td>
                    <td></td>
                    <td> Full market range </td>
                </tr>
                <tr class="odd">
                    <th scope="row"> <input type="checkbox" title="" name="4010016" id="check4010016" class="styled quoteSelector">
                    </th>
                    <td> 23 Apr 10 </td>
                    <td><a href="/ICISDashboard/PriceReport/13415939">Benzene</a></td>
                    <td></td>
                    <td class="text_center"> FOB </td>
                    <td> NWE </td>
                    <td class="text_center"> EUR/MT </td>
                    <td class="text_center"><span class="price_up"> Price movement indicator: Up </span></td>
                    <td class="text_center"> (+142.00) </td>
                    <td class="text_center"> 883.00
                        - 883.00 </td>
                    <td class="text_center"><span class="price_up"> Price movement indicator: Up </span></td>
                    <td class="text_center"> (+142.00) </td>
                    <td class="text_center"><span title="Contract" class="tip_holder contract_quote"> CONTRACT </span></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <th scope="row"> <input type="checkbox" title="" name="4010017" id="check4010017" class="styled quoteSelector">
                    </th>
                    <td> 23 Apr 10 </td>
                    <td><a href="/ICISDashboard/PriceReport/13415939">Benzene</a></td>
                    <td></td>
                    <td class="text_center"> CIF </td>
                    <td> Europe </td>
                    <td class="text_center"> USD/MT </td>
                    <td class="text_center"><span class="price_up"> Price movement indicator: Up </span></td>
                    <td class="text_center"> (+40.00) </td>
                    <td class="text_center"> 1110.00
                        - 1120.00 </td>
                    <td class="text_center"><span class="price_up"> Price movement indicator: Up </span></td>
                    <td class="text_center"> (+30.00) </td>
                    <td class="text_center"><span title="Spot" class="tip_holder spot_quote"> SPOT </span></td>
                    <td></td>
                    <td> Closing value </td>
                </tr>
                <tr class="odd">
                    <th scope="row"> <input type="checkbox" title="" name="4010018" id="check4010018" class="styled quoteSelector">
                    </th>
                    <td> 23 Apr 10 </td>
                    <td><a href="/ICISDashboard/PriceReport/13415939">Benzene</a></td>
                    <td></td>
                    <td class="text_center"> CIF </td>
                    <td> Europe </td>
                    <td class="text_center"> USD/MT </td>
                    <td class="text_center"><span class="price_up"> Price movement indicator: Up </span></td>
                    <td class="text_center"> (+8.00) </td>
                    <td class="text_center"> 1058.00
                        - 1135.00 </td>
                    <td class="text_center"><span class="price_up"> Price movement indicator: Up </span></td>
                    <td class="text_center"> (+70.00) </td>
                    <td class="text_center"><span title="Spot" class="tip_holder spot_quote"> SPOT </span></td>
                    <td></td>
                    <td> Full market range </td>
                </tr>
                <tr>
                    <th scope="row"> <input type="checkbox" title="" name="4010023" id="check4010023" class="styled quoteSelector">
                    </th>
                    <td> 23 Apr 10 </td>
                    <td><a href="/ICISDashboard/PriceReport/13415939">Benzene</a></td>
                    <td></td>
                    <td class="text_center"> FOB </td>
                    <td> NWE </td>
                    <td class="text_center"> USD/MT </td>
                    <td class="text_center"><span class="price_up"> Price movement indicator: Up </span></td>
                    <td class="text_center"> (+191.00) </td>
                    <td class="text_center"> 1190.00
                        - 1190.00 </td>
                    <td class="text_center"><span class="price_up"> Price movement indicator: Up </span></td>
                    <td class="text_center"> (+191.00) </td>
                    <td class="text_center"><span title="Contract" class="tip_holder contract_quote"> CONTRACT </span></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr class="odd">
                    <th scope="row"> <input type="checkbox" title="" name="4001005" id="check4001005" class="styled quoteSelector">
                    </th>
                    <td> 23 Apr 10 </td>
                    <td><a href="/ICISDashboard/PriceReport/13415939">Ethylene</a></td>
                    <td></td>
                    <td class="text_center"> CIF </td>
                    <td> NWE </td>
                    <td class="text_center"> USD/MT </td>
                    <td class="text_center"><span class="price_down"> Price movement indicator: Down </span></td>
                    <td class="text_center"> (-1.00) </td>
                    <td class="text_center"> 1107.00
                        - 1120.00 </td>
                    <td class="text_center"><span class="price_down"> Price movement indicator: Down </span></td>
                    <td class="text_center"> (-2.00) </td>
                    <td class="text_center"><span title="Spot" class="tip_holder spot_quote"> SPOT </span></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <th scope="row"> <input type="checkbox" title="" name="4001006" id="check4001006" class="styled quoteSelector">
                    </th>
                    <td> 23 Apr 10 </td>
                    <td><a href="/ICISDashboard/PriceReport/13415939">Ethylene</a></td>
                    <td></td>
                    <td class="text_center"> CIF </td>
                    <td> Med </td>
                    <td class="text_center"> USD/MT </td>
                    <td class="text_center"><span class="price_down"> Price movement indicator: Down </span></td>
                    <td class="text_center"> (-1.00) </td>
                    <td class="text_center"> 1107.00
                        - 1120.00 </td>
                    <td class="text_center"><span class="price_down"> Price movement indicator: Down </span></td>
                    <td class="text_center"> (-2.00) </td>
                    <td class="text_center"><span title="Spot" class="tip_holder spot_quote"> SPOT </span></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr class="odd">
                    <th scope="row"> <input type="checkbox" title="Pipeline" name="4001023" id="check4001023" class="styled quoteSelector">
                    </th>
                    <td> 23 Apr 10 </td>
                    <td><a href="/ICISDashboard/PriceReport/13415939">Ethylene</a></td>
                    <td> Pipeline, Pipeline </td>
                    <td class="text_center"> FD </td>
                    <td> NWE </td>
                    <td class="text_center"> EUR/MT </td>
                    <td class="text_center"><span class="no_change"> Price movement indicator: No Change </span></td>
                    <td class="text_center"> (0.00) </td>
                    <td class="text_center"> 830.00
                        - 840.00 </td>
                    <td class="text_center"><span class="no_change"> Price movement indicator: No Change </span></td>
                    <td class="text_center"> (0.00) </td>
                    <td class="text_center"><span title="Spot" class="tip_holder spot_quote"> SPOT </span></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <th scope="row"> <input type="checkbox" title="" name="4001052" id="check4001052" class="styled quoteSelector">
                    </th>
                    <td> 23 Apr 10 </td>
                    <td><a href="/ICISDashboard/PriceReport/13415939">Ethylene</a></td>
                    <td></td>
                    <td class="text_center"> FD </td>
                    <td> NWE </td>
                    <td class="text_center"> EUR/MT </td>
                    <td class="text_center"><span class="no_change"> Price movement indicator: No Change </span></td>
                    <td class="text_center"> (0.00) </td>
                    <td class="text_center"> 960.00
                        - 960.00 </td>
                    <td class="text_center"><span class="no_change"> Price movement indicator: No Change </span></td>
                    <td class="text_center"> (0.00) </td>
                    <td class="text_center"><span title="Contract" class="tip_holder contract_quote"> CONTRACT </span></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr class="odd">
                    <th scope="row"> <input type="checkbox" title="" name="4024001" id="check4024001" class="styled quoteSelector">
                    </th>
                    <td> 23 Apr 10 </td>
                    <td><a href="/ICISDashboard/PriceReport/13415939">Naphtha</a></td>
                    <td></td>
                    <td class="text_center"> CIF </td>
                    <td> NWE </td>
                    <td class="text_center"> USD/MT </td>
                    <td class="text_center"><span class="price_up"> Price movement indicator: Up </span></td>
                    <td class="text_center"> (+17.00) </td>
                    <td class="text_center"> 746.00
                        - 756.00 </td>
                    <td class="text_center"><span class="price_up"> Price movement indicator: Up </span></td>
                    <td class="text_center"> (+17.00) </td>
                    <td class="text_center"><span title="Spot" class="tip_holder spot_quote"> SPOT </span></td>
                    <td></td>
                    <td></td>
                </tr>
            </tbody>
        </table>
    </form>
</div>

Because of my dependencies on other plugins: jScrollPane, Tablesorter etc it was hard to find an ideal plugin solution to my issue.

So i wrote some code myself :)

It's not complete but the crux of it is as follows:

$(function() {

    var $headLength = $("#quotations thead th").length;

    $("#quotations thead th").each(function(index) {
        $thisWidth = $(this).attr("width");
        //console.log($thisWidth);
        $("#quotations tbody tr:first td:eq(" + index + ")").attr("width", $thisWidth)
    });

    var $clonedHead = $("#quotations thead")
    .clone()
    .insertBefore(".w_price_assess .jScrollPaneContainer")
    .wrap('<table id="quotations_clone" />');

    $("#quotations thead").hide();

    $(".w_price_assess").delegate("#quotations_clone thead th", "click", function() {

        var $this = $(this);
        var $thIndex = $this.index("#quotations_clone thead th");

        $("#quotations thead th:eq(" + $thIndex + ")").trigger("click");

    });

    $(".w_price_assess table.pricing").tablesorter({
        // change the multi sort key from the default shift to alt button 
        sortMultiSortKey: 'shiftKey'
    });

    // re-apply zebra striping after sort
    $(".w_price_assess table.pricing").bind("sortEnd", function() {
        $("table.striped .odd").removeClass("odd");
        $("table.striped tbody tr:nth-child(odd)").addClass("odd");
    });

});

So i am cloning the thead of the table i want and then re-inserting it above the actual table.

Tablesorter is still active by checking which th element of the new the new thead is clicked and then using jQuery's fabulous trigger method to trigger a click on the associated th in the hidden table head.