Lining Columns up in Different Tables

[Lycann]

I have a page where rows are dynamically populated with data. The complete results can be quite long and so I added some CSS and a <div> to contain the results in a second table, effectively "sticking" the table headers in place as a seperate table outside of the <div>.

The problem is that now I have two tables and though the number of columns is the same, they do not line up.

Is there a way to get them to line up? Here is the CSS I used and the code I used for the table. It accomplished what I was looking for, but frankly, its ugly and I would like to clean it up:

<style type="text/css">
div.tables {
width: 1024px;
height: 300px;
overflow-x: hidden;
overflow: scroll;
}
</style>

<table border="1">
<tr>
<th width="126">Server Name</th>
<th width="150">DNS Alias</th>
<th width="103">Environment</th>
<th width="60">Location</th>
<th width="66">Model</th>
<th width="42">Disk</th>
<th width="96">SAN Attached</th>
<th width="60">Memory</th>
<th width="30">CPU</th>
<th width="93">Refresh Date</th>
<th width="54">OS</th>
<th width="127">Server Description</th>
</tr>
</table>

<div class="tables">
<table border="1">
[% FOREACH line = row -%]
<tr>
<td width="126">[% line.0 %]&nbsp;</td>
<td width="150">[% line.1 %]&nbsp;</td>
<td width="103">[% line.2 %]&nbsp;</td>
<td width="60">[% line.3 %]&nbsp;</td>
<td width="66">[% line.4 %]&nbsp;</td>
<td width="42">[% line.5 %]&nbsp;</td>
<td width="96">[% line.6 %]&nbsp;</td>
<td width="60">[% line.7 %]&nbsp;</td>
<td width="30">[% line.8 %]&nbsp;</td>
<td width="93">[% line.9 %]&nbsp;</td>
<td width="54">[% line.10 %]&nbsp;</td>
<td width="127">[% line.11 %]&nbsp;</td>
</tr>
[% END -%]
</table>
</div>

I am not very familiar with CSS so I am sure this is a simple matter of setting up a layout for the page, I just have no idea how to go about doing that. Any help in that regard would be appreciated. Any alternatives for keeping the header in place and allowing a scroll bar for the data portion would also be welcome.

Thank you in advance.

[swa66]

I've never tried it, but a table can contain a thead and a tbody section, how about using the scrolling on just the tbody instead of a (superfluous?) div around the table ?

I'd also look at using bordercollapse, width using cols and the like in CSS instead of jamming it in the html.

I'd suggest reading this part of the CSS 2.1 standard:
[w3.org...]

Skip section 17.2, on a first read, it'll confuse you otherwise.

In my experience the implementation in both IE6 and IE7 of the border conflict resolution algorithm when using collapsed borders is broken (it ignores the precedence of hidden borders)

Edit:

Regarding scrolling the tbody and leaving the thead alone:
I just found his test page at w3.org:
[w3.org...]

Looking at the debacle in Firefox3, the complete lack of scrolling in safari and opera I doubt it'll give you much joy.

I'd still try with cols and fixed table width.

[rocknbil]

The complete results can be quite long . . .

Welcome aboard Lycann! Do you mean too wide? Since the data is variable, you'll never hit this trying to line them up with CSS.

There's really no way to align the header row with the data without putting it back on the table. The way I handle wide data sets is in the initial search API, I have checkboxes with some clicked as default to show columns. Click them all, you get all columns, or just show the critical columns.

If you can't sacrifice columns on output and don't want it to force the page too wide, target the search results in an iFrame so if it runs wide, it will scroll right.