← Back
Editing: test3.php
<html><head> <title>Persistent Table Headers with jQuery</title> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript"> function UpdateTableHeaders() { $("div.divTableWithFloatingHeader").each(function() { var originalHeaderRow = $(".tableFloatingHeaderOriginal", this); var floatingHeaderRow = $(".tableFloatingHeader", this); var offset = $(this).offset(); var tabwidth = 2000; var scrollLeft = $(window).scrollLeft(); if ((scrollLeft > offset.left) && (scrollLeft < offset.left + tabwidth)) { floatingHeaderRow.css("visibility", "visible"); floatingHeaderRow.css("left", Math.min(scrollLeft - offset.left, tabwidth - floatingHeaderRow.width()) + "px"); // Copy cell widths from original header $("th", floatingHeaderRow).each(function(index) { var cellHeight = $("th", originalHeaderRow).eq(index).css('height'); $(this).css('height', cellHeight); }); // Copy row width from whole table floatingHeaderRow.css("height", $(this).css("height")); } else { floatingHeaderRow.css("visibility", "visible"); floatingHeaderRow.css("left", "0px"); } }); } $(document).ready(function() { $("table.tableWithFloatingHeader").each(function() { $(this).wrap("<div class=\"divTableWithFloatingHeader\" style=\"position:relative\"></div>"); var originalHeaderRow = $("tr:first", this) originalHeaderRow.before(originalHeaderRow.clone()); var clonedHeaderRow = $("tr:first", this) clonedHeaderRow.addClass("tableFloatingHeader"); clonedHeaderRow.css("position", "absolute"); clonedHeaderRow.css("left", "0px"); clonedHeaderRow.css("top", $(this).css("margin-top")); clonedHeaderRow.css("visibility", "visible"); originalHeaderRow.addClass("tableFloatingHeaderOriginal"); }); UpdateTableHeaders(); $(window).scroll(UpdateTableHeaders); $(window).resize(UpdateTableHeaders); }); </script> <style> <!-- th { background-color: lightgrey; } --> </style> </head><body> <p>Leading lines</p><p>1</p><p>2</p><p>3</p><p>4</p> <p>111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111</p> <div class="divTableWithFloatingHeader" style="position: relative;"><table class="tableWithFloatingHeader" style="border: 3px none ;" width="5000"> <tbody><tr style="position: absolute; left: 327.83px; top: 0px; visibility: visible; height: 319.917px;" class="tableFloatingHeader"> <th style="height: 14.5833px;">header</th> <td></td> <td></td> </tr><tr class="tableFloatingHeaderOriginal"> <th>header</th> <td></td> <td></td> </tr> <tr><td></td> <th>table1 col header</th> <th>table1 col header</th> </tr> <tr><td></td> <td>table1 data1 with some extra long text. I would like to be able to "tweak" an HTML table's presentation to add a single feature: when scrolling down through the page so that the table is on the screen but the header rows are off-screen, I would like the headers to remain visible at the top of the viewing area.</td> <td>table1 data1</td> </tr> <tr><td></td> <td>table1 data2</td> <td>table1 data2</td> </tr> <tr><td></td> <td>table1 data3</td> <td>table1 data3</td> </tr> <tr><td></td> <td>table1 data4</td> <td>table1 data4</td> </tr> <tr><td></td> <td>table1 data5</td> <td>table1 data5</td> </tr> <tr><td></td> <td>table1 data6</td> <td>table1 data6</td> </tr> <tr><td></td> <td>table1 data7</td> <td>table1 data7</td> </tr> <tr><td></td> <td>table1 data8</td> <td>table1 data8</td> </tr> <tr><td></td> <td>table1 data9</td> <td>table1 data9</td> </tr> <tr><td></td> <td>table1 data9</td> <td>table1 data9</td> </tr> <tr><td></td> <td>table1 data9</td> <td>table1 data9</td> </tr> <tr><td></td> <td>table1 data9</td> <td>table1 data9</td> </tr> <tr><td></td> <td>table1 data9</td> <td>table1 data9</td> </tr> <tr><td></td> <td>table1 data9</td> <td>table1 data9</td> </tr> <tr><td></td> <td>table1 data9</td> <td>table1 data9</td> </tr> </tbody></table></div> </body></html>
Save File
Cancel