BizTalk Utilities CV ,   Jobs ,   Code library
 
Home Page


Add/Edit your code items
Search the code library
Browse for the code library

JavaScript

JavaScript

JavaScript Contents

Dynamically Filling HTML Select Box from XML Data Island using Javascript.
XML Basics Handbook
 
 

 LAMP >>

By David Silverlight
First Posted 05/23/2003
Times viewed 249

Sticky Table Headers

This post contains attachments
v20030523204554.zip 

Summary Sticky Table Headers are a characteristic of tables that allow the HeaderRow of a table to remain stationary while the data rows are allowed to scroll. This offers a nice effect that allows tables a more "elegant" appearance. Users often ask me about this and it is nice to give this effect with minimal effort. As with just about everything related to programming, there is more than one way to skin a cat. Below are a few techniques that I am familiar with. If you know of any others, please let me know.

Version 1 - Using CSS and Dynamic Expressions
This is another version that I like quite a bit because it uses CSS and Dynamic Expressions. Dynamic Expressions are a very powerful technology because they allow you to update style properties dynamically via javascript. Pretty cool, eh?

Check out version 1

Version 2 - Using CSS Only
This is my favorite version because it is done completely through CSS in a very concise manner. IMHO, it is quite impressive that it can be accomplished via CSS only.

Check out Version 2

Version 3 - Using WebFX SyncScroll Property
This is an example of a scrolling table created by KustomKraft , who has modified the SyncScroll Demo from WebFX to make it a little eaiser to use. According to KustomKraft, there are some limitations to this that he is also currently working on and has another version that is much harder to setup but does fix some of the problems. For most people this should work just fine.

Check out version 3

Version 4 - Using a Header Table and Data Table
This example demonstrates probably the most common implementation of this functionality. Essentially, it is super-easy to implement and figure out, but in some cases it is still difficult to make sure that the column headings line up with the data when the data gets wide.

Check out version 4

Rate this article on a scale of 1 to 10 (0 votes, average 0)

Your vote :  

 LAMP >>



Leave a comment for this article
Your name
Your email (optional)
Your comment
Optional: Upload an attachment
Enter the code shown:

 
 

    Email TopXML