Leslee Sheu

CSS Table Scrolling with Fixed Header for IE 7

2009-01-30T13:30:01-12:00:00

This week I was tasked with styling a data table so that all the rows would scroll vertically, but the header row would stay in place. For the project in question, the scrolling must work in both Firefox and IE 7.

Firefox supports CSS for scrolling the <tbody> part of the table. However, IE does not support scrolling for the <tbody>. I searched some other blogs for solutions and found that a popular solution for IE involves using expressions in CSS. A scrolling <div> is placed around the <table>. The expression is applied to the <thead> row like this:

     thead tr {

         position: relative;

         top: expression(this.offsetParent.scrollTop);

        }

But I found that the relative positioning caused the <thead> to shift down a few pixels when the scroll is activated. (Adding -2 to the expression did not solve the shifting problem for me.) So I decided to use position: absolute instead. This positions the row in <thead> correctly, however it will cover up the rest of the table rows. So I applied extra padding to the first table row in <tbody>, so that the date will show below the fixed header. Here is the result:

Here is my code, which I have only tested in Firefox 3 and IE 7. The first CSS style block is for Firefox. The second style block is within conditional comments for IE, so that these styles will overwrite the Firefox styling. (Normally I would be linking to external stylesheets -- a general one for non-IE browsers and a separate one for IE). For simplicity's sake in this example, I did not use class names -- you could apply your own class names as needed.

CSS:

<style type="text/css">

    table {

        border: solid #66CC99;

        border-width: 0px 1px 1px 0px;

        width: 400px;

    }

    th, td {

        border: solid #66CC99;

        border-width: 1px 0px 0px 1px;

        padding: 4px;

    }

    th {

        background-color: #339999;

        color: #FFFFFF;

    }

    tr.alt td {

        background-color: #EEEEEE;

    }

    tbody {

        height: 200px;

        overflow-y: auto;

        overflow-x: hidden;

    }

</style>

<!--[if IE]>

    <style type="text/css">

        div {

            position: relative;

            height: 200px;

            width: 416px;

            overflow-y: scroll;

            overflow-x: hidden;

            border: solid #66CC99;

            border-width: 0px 0px 1px 0px;

        }

        table {

            border-width: 1px 1px 0px 0px;

        }

        thead tr {

            position: absolute;

            top: expression(this.offsetParent.scrollTop);

        }

        tbody {

            height: auto;

        }

        table tbody tr:first-child td {

            padding: 29px 4px 4px 4px;

        }

    </style>

<![endif]-->

HTML:

<div>

    <table border="0" cellspacing="0" cellpadding="0">

        <thead>

              <tr>

                    <th>HEADER 1</th>

                    <th>HEADER 2</th>

                    <th>HEADER 3</th>

                    <th>HEADER 4</th>

              </tr>

        </thead>

        <tbody>

              <tr>

                    <td>content 1</td>

                    <td>content</td>

                    <td>content </td>

                    <td>content </td>

              </tr>

              <tr class="alt">

                    <td>content 2</td>

                    <td>content </td>

                    <td>content </td>

                    <td>content </td>

              </tr>

              <tr>

                    <td>content 3</td>

                    <td>content </td>

                    <td>content </td>

                    <td>content </td>

              </tr>

              <tr class="alt">

                    <td>content 4</td>

                    <td>content </td>

                    <td>content </td>

                    <td>content </td>

              </tr>

              <tr>

                    <td>content 5</td>

                    <td>content </td>

                    <td>content </td>

                    <td>content </td>

              </tr>

              <tr class="alt">

                    <td>content 6</td>

                    <td>content </td>

                    <td>content </td>

                    <td>content </td>

              </tr>

              <tr>

                    <td>content 7</td>

                    <td>content </td>

                    <td>content </td>

                    <td>content </td>

              </tr>

              <tr class="alt">

                    <td>content 8</td>

                    <td>content </td>

                    <td>content </td>

                    <td>content </td>

              </tr>

              <tr>

                    <td>content 9</td>

                    <td>content </td>

                    <td>content </td>

                    <td>content </td>

              </tr>

              <tr class="alt">

                    <td>content 10</td>

                    <td>content </td>

                    <td>content </td>

                    <td>content </td>

              </tr>

              <tr>

                    <td>content 11</td>

                    <td>content </td>

                    <td>content </td>

                    <td>content </td>

              </tr>

              <tr class="alt">

                    <td>content 12</td>

                    <td>content </td>

                    <td>content </td>

                    <td>content </td>

              </tr>

              <tr>

                    <td>content 13</td>

                    <td>content </td>

                    <td>content </td>

                    <td>content </td>

              </tr>

              <tr class="alt">

                    <td>content 14</td>

                    <td>content </td>

                    <td>content </td>

                    <td>content </td>

              </tr>

        </tbody>

    </table>

</div>

MOSS UI Tutorial on YouTube

2008-11-03T10:26:44-12:00:00

As some folks have pointed out (thanks!), the MOSS UI Tutorial videos are no longer available on ScreenCast.com. I was using a free account at ScreenCast and my bandwidth limit was reached, so they have disabled my content. I'm looking around for alternatives, but in the meantime you can see the screencasts on YouTube.

Part 1: Master Page Overview and Custom Design Examples
http://www.youtube.com/watch?v=7nd7D4JwYbM

Part 2: Prepping HTML/CSS Templates for MOSS
http://www.youtube.com/watch?v=Nu2MIGg1sfc

Part 3: Prepping the Files in SharePoint Designer
http://www.youtube.com/watch?v=7ScHtsoLXtY

Part 4: Base Master Page Code Overview
http://www.youtube.com/watch?v=07zT-ab671s

Part 5: Using the Base Master Page to Create a Custom Master Page
http://www.youtube.com/watch?v=GrtQduUwAC8

Part 6: Creating a Custom Page Layout
http://www.youtube.com/watch?v=CXoxqGgpB8g

Part 7: Assigning the Master Page and CSS File
http://www.youtube.com/watch?v=gN70CjPy80Q

Part 8: Creating a New Web Page
http://www.youtube.com/watch?v=Ga-ScG4626s

Part 9: Tips for Styling the Navigation Control
http://www.youtube.com/watch?v=J_rWfdI8C-o

Part 10: CSS Variations in a MOSS Website
http://www.youtube.com/watch?v=iYqYD0f9b0Y

MOSS UI Tutorial Downloads

2008-10-22T16:16:26-12:00:00

Here are some supplimentary files for the MOSS UI Tutorial series that I recently posted. (The tutorial screencast posts begin here.)

Here are the Base Master Page and Base CSS File developed by e.magination for use in MOSS websites.

Here are the HTML Template files (an HTML file, CSS file, and images) used for the Demo site in the screencast series.

I have updated the individual screencast posts with links to the PDF files that go with each post. Each PDF file contains the slides used for that chapter in the screencast series.

Please contact me if there is any problem downloading the files. Thanks!

MOSS UI Tutorial: Part 10

2008-10-15T12:55:03-12:00:00

CSS Variations in a MOSS Website

Part 10 discusses some bonus tips for applying CSS variations in MOSS, by using the Page Layout method or the Subsite method. Here is a PDF file of the slides featured in this screencast.

MOSS UI Tutorial: Part 9

2008-10-15T12:48:50-12:00:00

Tips for Styling the Navigation Control

Part 9 demonstrates some tips for how to style the menu control in MOSS. Here is a PDF file of the slides featured in this screencast.

MOSS UI Tutorial: Part 8

2008-10-15T12:46:27-12:00:00

Creating a New Web Page

Part 8 demonstrates how to create a new page from the custom Page Layout in MOSS. Here is a PDF file of the slides featured in this screencast.

MOSS UI Tutorial: Part 7

2008-10-15T12:44:56-12:00:00

Assigning the Master Page and CSS File

Part 7 demonstrates how to assign the custom Master Page and custom CSS file in MOSS. Here is a PDF file of the slides featured in this screencast.

MOSS UI Tutorial: Part 6

2008-10-15T12:43:40-12:00:00

Creating a Custom Page Layout

Part 6 demonstrates how to create a custom page layout, and how to add field controls and web part zones to the page layout in SharePoint Designer. Here is a PDF file of the slides featured in this screencast.

MOSS UI Tutorial: Part 5

2008-10-15T12:41:42-12:00:00

Using the Base Master Page to Create a Custom Master Page

Part 5 demonstrates how to create a custom Master Page in MOSS, using the base Master Page created by e.magination. Here is a PDF file of the slides featured in this screencast.

MOSS UI Tutorial: Part 4

2008-10-15T12:33:50-12:00:00

Base Master Page Code Overview

Part 4 gives an overview of the base Master Page that was created by e.magination for use in MOSS websites. Here is a PDF file of the slides featured in this screencast.