Scrollable table ideas (tricky)

I've been wrestling with this for some time now. Say that I have a table that has many rows and many columns (overflows the page vertically and horizontally). I want to fix the first row (thead) in place.

<strong>The catch</strong>: I want the vertical and horizontal scrollbars to ALWAYS be visible. i.e., I don't want the user to have to scroll horizontally to find the vertical scroll bar, and vice versa.

The best I could come up with is to split the thead and tbody into two separate tables with synchronized scrolling, but this creates problems with alignment and matching cell widths, so I'd rather not.

How would you go about solving this?


No need to split the the table into 2 tables. You can try the following which uses one table but still freezes the header.

<table > <thead><tr><th>This is my header</th></tr></thead> <tbody style="max-height:100px;overflow:auto;display:block"> <tr> <td>col1</td> </tr> <tr> <td>col1</td> </tr><tr> <td>col1</td> </tr><tr> <td>col1</td> </tr><tr> <td>col1</td> </tr><tr> <td>col1</td> </tr><tr> <td>col1</td> </tr><tr> <td>col1</td> </tr><tr> <td>col1</td> </tr><tr> <td>col1</td> </tr><tr> <td>col1</td> </tr><tr> <td>col1</td> </tr><tr> <td>col1</td> </tr><tr> <td>col1</td> </tr><tr> <td>col1</td> </tr><tr> <td>col1</td> </tr><tr> <td>col1</td> </tr><tr> <td>col1</td> </tr><tr> <td>col1</td> </tr><tr> <td>col1</td> </tr> </tbody> </table>


I use the jquery datatables plugin, an example of what you want can be seen here http://www.datatables.net/examples/basic_init/scroll_xy.html


To anyone who wants to achieve a similar effect:

Wrap your table in a div with width:100%; and overflow:auto;.

Copy the header portion of your table and create a new table with just that in it. POSITION THIS TABLE AS ABSOLUTE! (position:absolute;)

Place your header table in the same div as the real table. (It should fit perfectly over the original header portion).

Use jQuery to manage the scrolling of the div and stick the header in place...

jQuery(document).ready(function() { jQuery('#tableDiv').scroll(function() { jQuery('#copiedHeaderTable').css('top', jQuery(this).scrollTop()); }); })

This solution of course makes a few assumptions about your requirements, but has a few advantages (simplicity being the main).

<strong>Edit</strong> To ensure matching cell widths, wrap all th contents in a div and set the width of each div manually before the cloning:

jQuery('#headerRow th div').each(function() { jQuery(this).css('width', jQuery(this).parent()[0].offsetWidth+'px'); });


  • Debugging an ongoing .net process
  • How do determine gutter-width in the sass version of zurbs foundation
  • Calling super.approveSelection() within a SwingWorker
  • Sign extending from a constant bit width in C#
  • How to test a multi-threaded TCPServer with rspec
  • java rmi deadlock
  • Windows 8 Metro style ListView auto scroll
  • Is there a way to act before the scroll event?
  • Update two sets of radiobuttons - shiny
  • Powerpoint 2010 VSTO AddIn taskpane on multiple Windows
  • Is there a chance to get -splash: work for SWT applications that require -XstartOnFirstThread?
  • Scrolling News Ticker Jquery - Issues
  • Nested not working on slide
  • Retrieving a double from a JTextArea while solving for X
  • Calling java project from Mathematica
  • oauth2client.client.HttpAccessTokenRefreshError: invalid_grant: Invalid JWT
  • Load Same ACF Map Twice on Same Page
  • incomplete type 'struct' error in C
  • Regex for Specific Tag
  • How to save a record and immediately use its GUID
  • Azure table store snapshot/backup capability
  • Bigquery event streaming and table creation
  • Center align outputs in ipython notebook
  • saving file generated by TCPDF
  • How to view images from protected folder with php?
  • Not able to aggregate on nested fields in elasticsearch
  • custom UITableViewCell with image for highlighting
  • Textfile Structure (tables)
  • Swift: Switch statement fallthrough behavior
  • Record samples being played with OpenAL
  • Linq Objects Group By & Sum
  • Adding a button at the bottom of a table view
  • Sending data from AppleScript to FileMaker records
  • vba code to select only visible cells in specific column except heading
  • Large data - storage and query
  • What are the advantages and disadvantages of reading an entire file into a single String as opposed
  • costura.fody for a dll that references another dll
  • Observable and ngFor in Angular 2
  • UserPrincipal.Current returns apppool on IIS
  • java string with new operator and a literal