Databases
StackOverflow2013
Postsdbo
PO
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>You can use Lobstrosity's code with a slight modification: <code>position: fixed</code> instead of <code>absolute</code>.</p> <p><code>position: fixed</code> is now widely adopted by all browsers including IE8 and onwards. BTW fixed renders much nicer on mobile/tablet devices than <code>position: absolute</code>.</p> <p>I found that on a table with dynamic widths for each column, the absolutely positioned &lt;thead> would lose the widths of the rest of the columns, so to fix this I came up with the following code:</p> <p><strong>What this code does is as follows:</strong></p> <p>Determines the widths of each column in your table by looking up the CSS widths of the first &lt;tbody> &lt;tr> &lt;td> row and storing these in an array for later. When the user scrolls the class 'fixed' is added to the &lt;thead> (Default browser behaviour will alter the widths of the &lt;th>'s and they won't match up with the &lt;tbody>. So to fix this we retroactively set the widths of the &lt;th> to the values we've read earlier.</p> <p>Anyway here's the code:</p> <p><strong>CSS</strong></p> <pre><code>table.entries {width: 100%;border-spacing: 0px;margin:0;} table.entries thead.fixed {position:fixed;top:0;} </code></pre> <p><strong>HTML</strong></p> <pre><code>&lt;table class="entries" id="entriestable"&gt; &lt;thead&gt; &lt;tr&gt; &lt;th&gt;Name&lt;/th&gt; &lt;th&gt;Email&lt;/th&gt; &lt;th&gt;Location&lt;/th&gt; &lt;th&gt;DOB&lt;/th&gt; &lt;th&gt;Opt&amp;nbsp;in&lt;/th&gt; &lt;th&gt;Added&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tbody&gt; &lt;tr&gt; &lt;td class="name"&gt;Ricky Bobby&lt;/td&gt; &lt;td&gt;ricky.bobby@email.com&lt;/td&gt; &lt;td class="addy"&gt;&lt;i&gt;Kent, GB&lt;/i&gt;&lt;/td&gt; &lt;td class="dob"&gt;20/08/1984&lt;/td&gt; &lt;td&gt;Yes&lt;/td&gt; &lt;td class="date"&gt;4 hours ago&lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt; </code></pre> <p><strong>JavaScript</strong></p> <pre><code>TableThing = function(params) { settings = { table: $('#entriestable'), thead: [] }; this.fixThead = function() { // empty our array to begin with settings.thead = []; // loop over the first row of td's in &amp;lt;tbody&gt; and get the widths of individual &amp;lt;td&gt;'s $('tbody tr:eq(1) td', settings.table).each( function(i,v){ settings.thead.push($(v).width()); }); // now loop over our array setting the widths we've got to the &amp;lt;th&gt;'s for(i=0;i&lt;settings.thead.length;i++) { $('thead th:eq('+i+')', settings.table).width(settings.thead[i]); } // here we attach to the scroll, adding the class 'fixed' to the &amp;lt;thead&gt; $(window).scroll(function() { var windowTop = $(window).scrollTop(); if (windowTop &gt; settings.table.offset().top) { $("thead", settings.table).addClass("fixed"); } else { $("thead", settings.table).removeClass("fixed"); } }); } } $(function(){ var table = new TableThing(); table.fixThead(); $(window).resize(function(){ table.fixThead(); }); }); </code></pre>
 

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