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>
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
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!
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.
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.
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.
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.
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.
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.
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.