HTML Table: Fixed column and row header - column offset using <center>

Posted on 2007-10-08
Last Modified: 2011-02-14
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.

Using multiple table solution supplied :

This sample fails to align the column headers correctly (offset by 1/2 the scrollbar width) when I use <center> to center the table (and any other elements i desire to have on the form).
e.g. by encasing the sample in the following form

               <h1>Fixed Headers (resize window to view scrollbars)</h1>
               <table border=0 cellspacing=0 cellpadding=0 width=80% >
............... sample coding of scrollable table

Question by:intellias_net
    LVL 27

    Expert Comment

    by:Jason Watkins
    Why not use a CSS, instead of fixed formatting?

    LVL 28

    Accepted Solution

    Is this what you are looking for

    Author Comment

    The issue was adding fixed by:
    <td  align="left">  <--- added alignment
    <div class="headerRow">
    Also making sure that alignment of the text was consistant from column headers and table body.

    Author Comment

    P.S. Ohter solutions using CSS fo fix headers are convient; however, select elements will not respond to z order and will overlay the fixed headers.  Additionally the calculations of fixed headers using CSS expression has a nast habbit of locking up CPU time in certain situation causing the calculation of offsetWidth/Heights to take extrordinary time.

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    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

    Popularity Can Be Measured Sometimes we deal with questions of popularity, and we need a way to collect opinions from our clients.  This article shows a simple teaching example of how we might elect a favorite color by letting our clients vote for …
    Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
    In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
    The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

    779 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