StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>A few months ago, I wrote some code that did exactly that where I wanted the headers to perform similar to section headers on iOS. Utilising a Jquery, the solution I ended up with involved creating an onScroll (and onResize for window resizing) event listener that ran a check through all <code>$('table thead')</code> and checked their <code>$(this).position()</code> on the page.</p> <p>The check was whether the <code>thead</code> had a position which was above the top of the current viewport.</p> <p>Once I had found the most relevant header (the bottommost <code>thead</code> that was above the viewport), I created a new <code>table</code>, with <code>position: fixed</code> at (0, 0) and copied into it a new column for each column of the headers rows and manually set its <code>width</code> properties to match the original table. </p> <p><a href="http://dl.dropbox.com/u/297705/PoC/tableheaderpoc.html">I have put together a Proof of Concept which shows how this all works</a>. </p> <p>Here is some pseudo-code of how it works:</p> <ol> <li>Check the table is visible</li> <li>Get a list of all <code>thead</code> sections in the table</li> <li>Reverse the list</li> <li>Find the first <code>thead</code> in the array with a top position less than <code>scrollTop</code> of the <code>body</code> element</li> <li>If we found one: <ol> <li>Create deep copy of the thead</li> <li>Make a container table</li> <li>Copy attributes from the original table so the styles get copied</li> <li>Position the container at <code>[0, originalTable.left]</code></li> <li>Set the width equal to the <code>outerWidth</code> of the original table</li> <li>Set the width of every <code>td</code> found to the width of the matching <code>td</code> from the original table</li> <li>Add it to the DOM</li> </ol></li> <li>If none found, remove the existing container from the DOM if there was one</li> </ol> <p>There are some other edge case details that made this even nicer too:</p> <ul> <li>Instead of (0, 0), the origin point for the fixed row was altered based upon whether the "real" header row for the <code>tbody</code> below the one with the fixed header should be pushing it away.</li> <li>Ensure that previous header rows are deleted before making a new one</li> <li>Don't recreate the header row if the header you'd be making is the same as what is already there</li> </ul> <hr> <p>This approach worked a lot better others I tried such as trying to <code>position:absolute</code> an object due to the fact that Firefox and IE aren't incredibly fast at running the onScroll handler so you tend to see 'juddering'. I also tried mucking with the <code>position</code> attribute of the <code>thead</code>s, this just ended in the table column widths jumping about and not matching the data.</p> <p><code>thead</code> nodes aren't strictly required for this solution as you can use some other selector to determine which rows are headers etc.</p> <hr> <p><strong>Update</strong>: Added example code and pseudo-code</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