Stylish CSS Gridviews (in IE)
I'm a huge fan a well designed GUIs and clean looking layouts, thats why I use a Mac <g>. While its easy to get the layout you want in a desktop application, its not always so easy in a web application. Even though IE frequently annoys me with its lack of standard CSS support, ocassionally it allows you to make some nice UI effects. One example is freezing headers in a grid view or table. In IE its pretty easy to do by wrapping the gridview in a div and setting a style on the header elements like so:
th
{
background-color: #006699;
color: white;
position: relative;
top: expression(this.scrollTop);
z-index: 10;
}
.tableContainer
{
overflow-y: scroll;
height: 250px;
}
<div class="tableContainer">
<table class="table" cellpadding="0" cellspacing="0">
<tr>
<th>Name</th>
</tr>
..........
</table>
</div>
This creates a scrollbar on the side of the table and keeps the headers in place as you scroll. Another nice effect which compliments the frozen headers is the rounded corners css style at Nifty Corners. You can check out the javascript/css code there which adds rounded edges to elements without images. By wrapping the tableContainer div in an extra roundCorners div, you can get something like this:
I posted a sample of the code used to create this screenshot here. Again this looks way cooler in IE 6+. It works fine in firefox, the headers just don't stay in place. Perhaps as CSS standards progress it'll be way easier to do all of this. Oh and all the browsers have to actually support CSS standards. IE, I'm looking in your direction.