Databases
StackOverflow2013
Postsdbo
POPositioning of floating column header
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POPositioning of floating column header
    text
    copied!<p>This code works well apart from when the floating header appears it is one pixel to the right of the original.</p> <p>Any way to line them up fully? So when you scroll the header floats smoothly and doesn't appear to move out to the right ?</p> <pre><code>&lt;title&gt;Table with Persistent Headers&lt;/title&gt; &lt;link rel="stylesheet" href="css/Styles.css"&gt; &lt;style&gt; .floatingHeader { position: fixed; top: 0; visibility: hidden; } &lt;/style&gt; &lt;style&gt; th {background-color:#FF0000;} &lt;/style&gt; &lt;script src="js/wiz/jquery-1.8.0.js"&gt;&lt;/script&gt; &lt;script&gt; function UpdateTableHeaders() { $(".persist-area").each(function() { var el = $(this), offset = el.offset(), scrollTop = $(window).scrollTop(), floatingHeader = $(".floatingHeader", this) if ((scrollTop &gt; offset.top) &amp;&amp; (scrollTop &lt; offset.top + el.height())) { floatingHeader.css({ "visibility": "visible" }); } else { floatingHeader.css({ "visibility": "hidden" }); }; }); } // DOM Ready $(function() { var clonedHeaderRow; $(".persist-area").each(function() { clonedHeaderRow = $(".persist-header", this); clonedHeaderRow .before(clonedHeaderRow.clone()) .css("width", clonedHeaderRow.width()) .addClass("floatingHeader"); }); $(window) .scroll(UpdateTableHeaders) .trigger("scroll"); }); &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="page-wrap"&gt; &lt;h1&gt;Persistent Headers&lt;/h1&gt; &lt;p&gt;Scroll down and watch the table headers stay with the table when they normally would be scrolled off the screen.&lt;/p&gt; &lt;table class="persist-area"&gt; &lt;thead&gt; &lt;tr class="persist-header"&gt; &lt;th&gt;Column One Header&lt;/th&gt; &lt;th&gt;Column Two Header&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tbody&gt; &lt;tr&gt; &lt;td&gt;table1 data1&lt;/td&gt; &lt;td&gt;table1 data1&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;table1 data2&lt;/td&gt; &lt;td&gt;table1 data2&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;table1 data3&lt;/td&gt; &lt;td&gt;table1 data3&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;table1 data4&lt;/td&gt; &lt;td&gt;table1 data4&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;table1 data5&lt;/td&gt; &lt;td&gt;table1 data5&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;table1 data6&lt;/td&gt; &lt;td&gt;table1 data6&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;table1 data7&lt;/td&gt; &lt;td&gt;table1 data7&lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>Thanks</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload