CSS Scrolling Tables with Fixed Headings

CSS Scrolling Tables is a big topic. Lots of people have asked questions about how to keep the headings fixed, but are not always finding good answers. It took me one day (Saturday) to figure out the problem and part of today (Sunday) to write this post. I'm working on a project where I needed a scrolling table with fixed headings. That's where the table headings stay fixed in place, and you can scroll the data portion of the table. I tried a couple of things that didn't work, then resorted to a quick Google search that landed me at Stu Nicholls' CSSPlay site where he has a post on CSS Scrolling Tables.

Stu's solution is very clean compared to some others I found, however it didn't handle the very complex table I was dealing with. It does work fine when the data in each column of the table are close to the same width, but my table has one column where there is text that varies from a few words to a lengthy paragraph. To make things even worse, there are occasional cases in my data where a column will have a LongUnbrokenStringThatJustKeepsGoing. Those long strings create havoc in tables (and in my blog's text) as the browser tries to adjust column widths to accommodate the longest string it sees.

That combination of long paragraph data, and long unbroken strings broke Stu's solution.

The problem is that with variable length data in the cells, the browser ends up adjusting the width of the data cells based on content, but does not adjust the width of the fixed heading cells. So you end up with the column heading cells having different widths than the data cells, and they do not align. The frustrating thing is that if you allow the headings to scroll along with the data, then the browser will adjust the heading widths and all is well. But as soon as you start keeping the headings fixed, they no longer align.

I tried a few things to fix it.

First I set table-layout to fixed, thinking that would cause the Browser to use fixed cell width, which would be the same for headings and data cells. Didn't work.

Next, I allowed the Browser to load the whole page with the headings allowed to scroll (not fixed), then using Javascript I set the headings to be fixed. I was thinking, 'Well, I'll let the Browser figure out all the right widths for the headings, then sneak in with Javascript and tell it to not scroll them'. No luck! As soon as the Javascript ran, the headings no longer aligned with the data cells.

Then, I decided to give every column a class name, on both the heading and data cells, and use CSS to set the width explicitly on each column, like .col1 { width: 6em; }. Same result! The headings still didn't align with the data.

A little research revealed that when it comes to Tables, Browsers take your width statements as "suggestions" rather than as "commands". They'll try to accommodate you, but if there's some long string in a table cell, they can decide on a different width.

At this point I was about ready to ditch the table markup completely and just render it all with div's. I even coded it up, and quickly discovered that I could make fixed headings and data rows align correctly, but there was one thing that wasn't working. HTML tables do have the benefit that they render all the cells in a row with the same height. That wasn't true in my div-based markup. I had rows with cells of varying height, and that made it difficult to use borders to render a nice grid for the table.

For a second I thought about a way to make my div-based tables work using Javascript, but then another idea struck me: Go back to using table markup, but in each heading and data cell, put in an extra div to wrap the content, and give those divs explicit widths via CSS. Amazingly, this worked. I just wished I had thought of it sooner.

AN EXAMPLE: CRUISE SHIPS

I have linked to a series of self contained example files that illustrate various problems, and the ultimate solution. (note: the table data is a subset of the table in this Wikipedia article):

tableTest0 - This file contains just the initial table markup, and some minimal styling. This is what the table would look like with no scrolling.

tableTest1 - In this file we start having the table scroll. But notice that the headings scroll as well. What we're going for is to have the headings stay fixed, and only have the data portion of the table scroll.

tableTest2 - Here, we've got the headings fixed in place, but they are the wrong widths. The Browser is treating them like a separate table with respect to calculating their widths.

tableTest3 - In this file we change the markup to add a class on every table cell (both heading and data cells). We then apply widths to each cell class. At first this seems to work, but it's actually got a problem. As soon as you introduce one of those LongStringsWithNoSpaces, then this solution breaks. This is shown in tableTest4.

In tableTest5 we solve the problem by changing the markup to put div's in all the table cells, and those div's are all given widths. Below we'll take a closer look at the details of this solution.

tableTest6 is the final result after I applied some additional tweaks to improve the appearance of the table. These tweaks are described later in the post.

THE SOLUTION MARKUP & CSS

Here is the markup for the tableTest5 solution (this is prior to the tweaks applied in the next section of this post):

<div class="scrollableContainer">
  <div class="scrollingArea">
   <table class="cruises scrollable">
     <thead>
     <tr>
         <th><div class="name">Name</div></th>
         <th><div class="operator">Operator</div></th>
         <th><div class="began">Began operation</div></th>
         <th><div class="tonnage">Tonnage</div></th>
         <th><div class="status">Status</div></th>
     </tr>
    </thead>
    <tbody>
      <tr>
          <td><div class="name">Name of ship</div></td>
          <td><div class="operator">Who operates</div></td>
          <td><div class="began">Began service when</div></td>
          <td><div class="tonnage">How big</div></td>
          <td><div class="status">Current status</div></td>                        
        </tr>
       ... more rows ...
      </tbody>
   </table>
 </div>
</div>  

One thing you'll notice is I've wrapped the table in two DIVs. The outer div holds the whole thing and has some padding at the top that will be used for rendering the fixed headings (we'll absolutely position the headings over the top padding).

The inner div defines the area that will scroll. The key to producing the scrolling area is giving this div a height and setting the overflow property to 'auto'.

The other change in the markup is that I've wrapped the contents of each cell (both th's and td's) with divs, and given those divs class names that correspond to the name of the column. I hesitated in putting in this extra markup, tried several ways to avoid it, but in the end I found it absolutely necessary in order to take control of the column widths. Without it you end up with cases like my 4th example file: tableTest4. In fact the only difference between this example and the final solution (tableTest5) was the addition of the divs wrapping the cell contents.

Here's the CSS of the solution presented in the tableTest5 example. This is prior to the various tweaks we apply in the next section to improve the appearance of the table (to see the final code do a "view source" on tableTest6, or follow the individual changes described in the next section.):

* { padding: 0; margin: 0; }
  table.cruises { 
    font-family: verdana, arial, helvetica, sans-serif;
    font-size: 11px;
    cellspacing: 0; 
    border-collapse: collapse; 
    width: 535px;    
    }
  table.cruises th, table.cruises td { 
    border-right: 1px solid #999; 
    border-bottom: 1px solid #999; 
    }
  table.cruises th { background: #aab; }
  table.cruises td { background: #eee; }
  
  div.scrollableContainer { 
    position: relative; 
    width: 552px; 
    padding-top: 1.7em; 
    margin: 40px;    
    border: 1px solid #999;
    background: #aab;
    }
  div.scrollingArea { 
    height: 240px; 
    overflow: auto; 
    }

  table.scrollable thead tr {
    left: 0; top: 0;
    position: absolute;
    }

  table.cruises .name     { width: 108px; }
  table.cruises .operator { width: 126px; }
  table.cruises .began    { width: 76px; text-align:center; }
  table.cruises .tonnage  { width: 60px; text-align:center; }
  table.cruises .status   { width: 160px; }

Let's break down the CSS one part at a time. This first part is really just styling the table, and is not directly involved in the scrolling aspects of the design:

table.cruises { 
    font-family: verdana, arial, helvetica, sans-serif;
    font-size: 11px;
    cellspacing: 0; 
    border-collapse: collapse; 
    width: 535px;    
    }
  table.cruises th, table.cruises td { 
    border-right: 1px solid #999; 
    border-bottom: 1px solid #999; 
    }
  table.cruises th { background: #aab; }
  table.cruises td { background: #eee; }

In the next part we style the two wrapper div's that I mentioned earlier. The outer container is set to position: relative so it becomes the positioning context for all elements under it. We also add some padding at the top of this div. That padding area is the place where we will position the column headings (using absolute positioning, explained below). We also set the width to 552px. This has to be wide enough to accommodate both the table and the vertical scroll bar. You'll probably want to tweak your width to get things just right. The only other thing we do with this div is set it's border and background to match the colors we are using with the table.

In the inner div, all we need to do is set the height of the scrolling area and set overflow to auto. This creates the scrolling area of the table.

div.scrollableContainer { 
    position: relative; 
    width: 552px; 
    padding-top: 1.7em; 
    margin: 40px;    
    border: 1px solid #999;
    background: #aab;
    }
  div.scrollingArea { 
    height: 240px; 
    overflow: auto; 
    }

In the final part of the CSS, we first setup the absolute positioning of the column headings. We just put them as 0,0 of the positioning context, which is the outer div (class='scrollableContainer'). So, what we're doing here is positioning the column headings over the top of the padding we had created in that outer div.

The only other thing we need to do is set the widths of each column. You need to adjust these widths for the final presentation of the table. You want the last column to end just before the vertical scroll bar, but don't make the table too wide or you'll get a horizontal scroll bar. In my case the column widths add up to 530px. The total width of the outer div is 552px. The difference of 22px is taken up by the vertical scroll bar. If you want to center any columns, you can do that here too, as I do with the 'began' and 'tonnage' columns.

table.scrollable thead tr {
    left: 0; top: 0;
    position: absolute;
    }

  table.cruises .name     { width: 108px; }
  table.cruises .operator { width: 126px; }
  table.cruises .began    { width: 76px; text-align:center; }
  table.cruises .tonnage  { width: 60px; text-align:center; }
  table.cruises .status   { width: 160px; }

ADDITIONAL TWEAKS

Hiding Cell Overflow

After a few final tweaks, here is my final example.

If you looked at each of the examples I linked to above, one thing you might have noticed in tableTest5 is that the text in the 2nd column of the 9th row overflows into the next cell. Since we are taking full control of the column widths, and no longer allowing the Browser to determine widths based on LongStringsWithNoSpaces, then we also have to be responsible for making sure our column widths are wide enough.

If you have just a few cells that overflow and you don't want to make the whole column wider just for them, you have two choices: (1) Let them overflow into the next cell, or (2) truncate them. You can truncate them by setting overflow: hidden on the table cells. Adding that to the CSS of my example, would look like this:

table.cruises td { background: #eee; overflow: hidden; }

Fixing Scroll Bar Interaction

Another issue I found is that putting the cell borders on the right, as I have done, is causing some strange interaction with the scroll bar in some browsers, leaving artifacts while scrolling. The solution is to move the cell borders to the left and bottom, instead of right and bottom, like this:

table.cruises th, table.cruises td { 
    border-left: 1px solid #999; 
    border-bottom: 1px solid #999; 
    }

But then you'll notice that the headings are mis-aligned by one pixel. The reason for this is that we absolutely positioned the headers at 0,0 - which worked fine when there was no left border. But adding the left border shifted the headers over by one pixel. The solution for this is easy: just absolutely position at -1,0 instead:

table.scrollable thead tr {
    left: -1px; top: 0;
    position: absolute;
    }

Colored Columns

Next, I wanted to do something different, and give the columns different colors. To do this I decided to change the markup a bit by moving the class names off of the divs in each cell, up to the enclosing td or th. Like this:

<tr>
    <th class="name"><div>Name</div></th>
    <th class="operator"><div>Operator</div></th>
  ...
  <tr>
    <td class="name"><div>Queen Elizabeth</div></td>
    <td class="operator"><div>Cunard Line</div></td>    
  ...

That markup change requires adjusting the CSS selectors for each column to target the divs, using descendant selectors:

table.cruises .name     div { width: 108px; }
  table.cruises .operator div { width: 126px; }
  table.cruises .began    div { width: 76px;  text-align:center; }
  table.cruises .tonnage  div { width: 60px;  text-align:center; }
  table.cruises .status   div { width: 160px; }

Now, with that markup change in place, I can now set the colors of the various columns, like this:

table.cruises td.operator { background: #ebcb4d; }
  table.cruises td.tonnage  { background: white; }
  table.cruises td.name     { background: #C7E0C1; }  
  table.cruises td.began    { background: #B7C3E8; }

Adding Padding

The next tweak is to add some padding in all the cells:

table.cruises th, table.cruises td { 
    ...
    padding: 2px 4px;
    }

That padding makes the table wider, so we also adjust the width of the outer div up to 592px (this avoids the horizontal scroll bar):

div.scrollableContainer { 
    position: relative; 
    width: 592px; 
    ...

Styling the Headings

Finally we'll change the headings to different color and background, and set them to render in "small-caps". We also change the color of the scrollableContainer div to match the new color of the heading backgrounds:

table.cruises th { 
    background: #6b6164;
    color: white;
    font-variant: small-caps;
    }

  div.scrollableContainer { 
    ...
    background: #6b6164;
    }    

The screenshot of the table does not show the scroll bar on the right. Once again final working version with a scrollbar can be seen here. Do a "view source" to see the final CSS and Markup.

LARGER SCREEN, LARGER TABLE

Say you want the table to default to being fairly short (for people on netbooks or small monitors), but increase the height if the user is on a larger monitor with a large browser window.

That's not hard to do using Javascript. The following code uses the jQuery Javascript library.

First it pulls in jQuery hosted on Google's servers. When the document is loaded, the script sets the height of the scrollingArea div to be 100 px less than the Browser window height. You may need to subtract more than 100 depending on your page layout.

I also added another line of code that will resize the scrolling area as you drag the Browser window to re-size it. This is optional - if you don't want this behavior just remove the line that starts with $(window).resize.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".scrollingArea").height( $(window).height()-100 );
$(window).resize(function() { $(".scrollingArea").height( $(window).height()-100 ); } );
});
</script>

You can see a working example here.

JAVASCRIPT ALTERNATE STRIPING

Someone wrote to say they really liked the way the columns of the table are colored but they are wondering if there is an easy way to make every other row look a little different for easy readability, but still keeping with the overall column-based color scheme. Different shades of same colors on every other row for example.

A couple of lines of Javascript can give you that effect by setting the opacity to slightly different values on even and odd rows. Try this out:

$(".cruises tr:odd").css({'opacity':'.95'});
$(“.cruises tr:even”).css({‘opacity’:’.85’});

I’ve included it in the new example here.

NO JS? NO PROBLEM

What if you want to color every other row using only CSS? There is a pure CSS3 solution for this, but it won't work in IE < 9, or in older versions of other browsers. The following two rules do the equivalent of the Javascript above: .cruises tr:nth-child(odd) { opacity: 0.95; filter:alpha(opacity=95); } .cruises tr:nth-child(even){ opacity: 0.85; filter:alpha(opacity=85); } Example here.

The other way to solve it is to stick with CSS2, but also make some change to the server side code that generates the table so that it puts an "odd" or "even" class name on each row of the table. Then the CSS can use those class names to accomplish the same thing with these rules:

.cruises tr.odd { opacity: 0.95; filter:alpha(opacity=95); }
.cruises tr.even { opacity: 0.85; filter:alpha(opacity=85); }

Example here.

CONCLUDING NOTES

If you are having trouble with headings mis-aligning with the data by a few pixels, try increasing the width of the columns, starting on the left with the first column that is mis-aligned. It's best to do this in Firebug by placing your cursor on the width value and bumping it up (you can use the 'up arrow' key for this, or just edit in a new value). Once you've got the right widths in Firebug, remember to copy the value to your code.

If you are out there struggling with fixed table headings on a complex table (as I was for a full day), I hope this post will help you.

UPDATE

A question in the comments asks about highlighting rows of the table when they are hovered over. This just requires one additional CSS rule, but you have to make it specific enough. The CSS rule I added is:

table.cruises tr:hover td { 
    background: rgb(255, 255, 3);
  }

See the resulting table here.

Another question in the comments says: "My tbody content is pushed under the thead, so I'm not seeing my first tbody row... I've added an empty row to fix this but I still wonder why."

My answer: The padding-top setting on the scrollableContainer div should open up enough vertical space for the first row to show. You may need to increase the value of padding-top for your particular table. Give that a try and see if it allows you to get rid of the dummy row you inserted at the top of your table.