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

Posted on 2007-10-08
Medium Priority
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
  • 2
LVL 27

Expert Comment

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


LVL 28

Accepted Solution

gamebits earned 2000 total points
ID: 20037924
Is this what you are looking for


Author Comment

ID: 20038660
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

ID: 20038667
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.

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses four methods for overlaying images in a container on a web page
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
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…
Suggested Courses

862 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