473,386 Members | 1,698 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,386 software developers and data experts.

Header columns not aligning with scrolling columns beneath.

I have what is now a table with a header row and then obviously rows of data
beneath. If the data is more than 50 or 6 rows (100px) then the rows will
scroll using overflow:auto. This all works great, but I have alignment
issues with the columns. I can get things to line up in either case (with
scrolling or without scrolling) but not in both. Currently, I am using
Tables to align everything and giving each row a % width. I would love it
if I could find an alternative to tables for this presentation as well.

I have googled my butt off and found a couple solutions that play nicely if
you always have scroll bars, but what if you don't? Do I just bite the
bullet and say always put the bars there (overflow:scroll)?

Thanks for any advice or pointers.

Skip Hollowell.
Jul 20 '05 #1
7 3718
On Mon, 3 May 2004 12:12:26 -0400, Skip Hollowell
<skip_hollowell'at'yahoo.com> wrote:
I have what is now a table with a header row and then obviously rows of
data
beneath.


URL please.
Jul 20 '05 #2
Neal wrote:
I have what is now a table with a header row and then obviously rows
of data beneath.

URL please.


Sorry this took a couple days.
http://132.235.1.2/~thollowe/tables.html

There is some extraneous stuff in the sheet, but I tried to pull out as
much as possible. This is only really required for IE 5.5 and up, and I
noticed that that due to my use of overflow-y that it doesn't even
scroll on non-ie browsers.

The columns not lining up is driving me crazy. When using percentages,
I can get close, sometimes. I even have trouble with fixed width
columns though. Any suggestions on these columns, widths, and even
possible CSS-only alternatives would be greatly appreciated.

Thanks
Skip Hollowell.
Jul 20 '05 #3
Thomas 'Skip' Hollowell wrote:
Neal wrote:
I have what is now a table with a header row and then obviously rows
of data beneath.


URL please.

Sorry this took a couple days.
http://132.235.1.2/~thollowe/tables.html


The only solution I have come up with is to make each table 98% width
(header table and data table), give corresponding columns the same
percentage widths, and live with it. I have also made the overflow-y
to be scoll instead of auto. Once the customer gets used to seeing the
scroll bar all of the time, I don't think it will be that big of a deal.

Alternatives?

Skip.
Jul 20 '05 #4
Thomas 'Skip' Hollowell wrote:
Neal wrote:
I have what is now a table with a header row and then obviously rows
of data beneath.

URL please.


http://132.235.1.2/~thollowe/tables.html

The columns not lining up is driving me crazy.


Your header row (th) and data rows (td) are in 2 different tables. They
should be in the same table.

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.
Jul 20 '05 #5
kchayka wrote:
Your header row (th) and data rows (td) are in 2 different tables. They
should be in the same table.

There are two schools of thought on this, separate vs same table. But
since I am using two separate div tags, one for the header portion and
one for the data portion, I gave each their own table. This keeps the
scroll bar off of the header, and keeps the obscene amount of table code
cleanly differnetiated.

If you have any pros or cons for each style, I would love to hear them.
At this point all I can say is it's all subjective on the best way
to lay this out, that is until I hear differently from someone, and I
hope I do.

Skip.
Jul 20 '05 #6
Thomas 'Skip' Hollowell wrote:
kchayka wrote:
Your header row (th) and data rows (td) are in 2 different tables. They
should be in the same table.

There are two schools of thought on this, separate vs same table.


The semantically correct way is with the headers in the same table as
the data they apply to. Your markup, as is, is illogical.

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.
Jul 20 '05 #7
On Thu, 6 May 2004, Thomas 'Skip' Hollowell wrote:
There are two schools of thought on this,
Presumably the "do it on sound engineering principles" school, and the
"bludgeon it until it looks right, and stuff the structure" school?
separate vs same table.


What I said :-{

Jul 20 '05 #8

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

2
by: Big Slim | last post by:
I'm trying to use the OVERFLOW property to make only part of a table scrollable, but to no avail. You can split a table into two tables, with your column headers in the top table and your data...
17
by: Matt Kruse | last post by:
I'm looking for the best JS/CSS solution to add functionality to tables. The only browser which needs to be supported is IE5.5+, but no activeX can be used. to be able to do: - Fixed header row...
1
by: tesc | last post by:
I'm sure this is pretty simple but I'm having a hard time with it. I have a report that has multiple columns and have to change some of the titles in the page header. As a result, the titles don't...
8
by: pmud | last post by:
Hi, I have 2 questions: 1. I have an editable data grid with 21 columns. I need to edit only 2 cloumns in this data grid. But when the grid is displayed in Edit mode, all the columns show long...
4
by: Nehmo Sergheyev | last post by:
After reading about text line length http://psychology.wichita.edu/surl/usabilitynews/72/columns.htm , I'm thinking about experimenting with columns of text on a page. Is it possible on an HTML...
0
by: Carlos | last post by:
Hi all, I am trying to align the field sizes of each column in a gridview with columns headers given by a table built with xhtml. can this be done? I am trying to look for the property to...
4
by: Greg Scharlemann | last post by:
I'm having difficulty getting the radio buttons to align vertically with one another and the header (1 2 3 4 5) at the top. Ideally each radio button will be directly below the one above it and...
2
by: =?Utf-8?B?QWxoYW1icmEgRWlkb3MgS2lxdWVuZXQ=?= | last post by:
Hello misters, In another post of the news, mister Manish Bafna, give me a reference: ...
1
by: mb | last post by:
I know this sounds strange, but I have set up a dataview with a fixed header, so the header does not scroll up with the rows of data. However, I need the header to scroll horizontally (not...
0
by: taylorcarr | last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: aa123db | last post by:
Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...
0
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
0
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
0
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
0
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.