StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Here's something that <em>kind of</em> works (quickly tested in FF 3.5, Chrome 3, and IE 8) that you might be able to tailor to your needs.</p> <p>It uses absolute positioning of the <code>thead</code>. When the <code>thead</code> becomes absolutely positioned, this basically removes it from the original flow of the <code>table</code> and the widths of all the <code>tbody</code> <code>td</code>s adjust accordingly. So you get ugly behavior if you don't specify column widths or if any column's header is wider than any other cell in that column.</p> <p><strong>CSS</strong></p> <pre><code>#Grid thead.Fixed { position: absolute; } </code></pre> <p><strong>HTML</strong></p> <pre><code><table id="Grid"> <thead> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> </thead> <tbody> <tr> <td>1</td> <td>2</td> <td>3</td> </tr>  </tbody> </table> </code></pre> <p><strong>jQuery</strong></p> <pre><code>$(function() { var table = $("#Grid"); $(window).scroll(function() { var windowTop = $(window).scrollTop(); if (windowTop > table.offset().top) { $("thead", table).addClass("Fixed").css("top", windowTop); } else { $("thead", table).removeClass("Fixed"); } }); }); </code></pre> <p>I noticed that it does not work in IE unless you specify a strict XHTML doctype:</p> <pre><code><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html>  </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