HTML Table: Fixed column ahd row header

Posted on 2007-10-03
Last Modified: 2009-09-03
In a table there are column header and row headers.   The first row displayed in the table should be fixed that is when you scroll the table vertically the top row remains at the top.   The first column also needs to be fixed; that is, when you scroll horizontaly the first column remains at the far left potiion.  Currently I use a CSS file to position these column and rows at the far left and top of the table.   The problem with this method is that select object overlay the heders and certain configurations cause extreme CPU resourses.

I would like to develop a technique that uses 3 tables.  A table at the top of the main table and table at the far left of the main table.  Then when the vertical scrolling occurs both the main table and the left table will scroll in sync.  Simulary the same would happen for the horizontal scrolling.  These tables must be on the form within a DIV objects and use the DIV object scoll bars.
Question by:intellias_net
    LVL 28

    Accepted Solution


    Author Comment

    ithis inluces a js file and css, do you have address for thoes too?
    LVL 28

    Expert Comment

    You can download the source code here

    Expert Comment

    I'm a newbie so don't know if this is the right way of raising this but the source code download link....

    ....  doesn't appear to be correct any longer. Is there a current download link?


    Featured Post

    How to run any project with ease

    Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
    - Combine task lists, docs, spreadsheets, and chat in one
    - View and edit from mobile/offline
    - Cut down on emails

    Join & Write a Comment

    As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
    JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
    In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
    In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…

    754 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    16 Experts available now in Live!

    Get 1:1 Help Now