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:\[code\]<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="http://stackoverflow.com/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> <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="http://stackoverflow.com/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="http://stackoverflow.com/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="http://stackoverflow.com/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="http://stackoverflow.com/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="http://stackoverflow.com/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="http://stackoverflow.com/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="http://stackoverflow.com/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="http://stackoverflow.com/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="http://stackoverflow.com/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="http://stackoverflow.com/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>\[/code\]
Fixed position table header relative to parent scrolling DIV element
- Thread starter Luccas.
- Start date