How to align the columns of 2 stacked tables? 3

[jsteph]

Hi,
I have 2 tables, stacked one on top of the other, the layout is identical, but the data in the cells is different. The td widths are identical, same with margins, padding, borders, etc. But they just don't line up. And the mismatch is not constant, it depends on how many rows are in the bottom table.

This particular question is in regards to a 'scrolling table' kludge, where I have the top table as the fixed 'column header', and the bottom table as the rows. The scrolling works very nicely except for the slight misalignment. If I have just 2 or 3 rows--I'd call it passable--it looks like it drifts about 1 pixel per column (I have about 15 columns). But if there are, say 50 rows, then the drift is greater, but it starts at, maybe, the 6th column--and jumps 5 pixels there, then a few more at the 9th column, etc. It's not predictable.

But the question I'm asking is really broader--regardless of the purpose--scrolling or just simply having 2 tables--why would 2 identical tables be rendered differently? And how to I align them properly? Thanks,
--Jim

 

[BillyRayPreachersSon]

why would 2 identical tables be rendered differently?

They are not identical. As you have said yourself, the data they contain is different - which is why they look different.

You have several options, depending on many factors (including target browser). These might include:

- clipping all text that falls outside the desired width of the cell (real easy using style="overflow:hidden", should work in most browsers)

- forcing text to wrap (might not work in all browsers)

- programatically increasing the width of all columns to be the same in both tables, after redndering (again, might not work in all browsers).

There are probably many other options, but these are the ones that spring to mind immediately.

Hope this helps,
Dan

 

[Foamcow]

I am not sure what the "scrolling table kludge" is.
But since you have 1 table for the headers and another for the table rows I ask myself, "why not just use 1 table?".
If you used 1 table then it would all line up properly.

Foamcow Heavy Industries - Web design and ranting
Toccoa Games - Day of Defeat gaming community
Target Marketing Communications - Advertising, Direct Marketing and Public Relations
"I'm making time

 

[tsdragon]

I wrote some javascript code that twiddles with the widths of table columns to make them the same size. I can post or email it if you would like to take a look at it. It's not as easy as it sounds. There are a lot of snags to work around, and once you get them right and the user resizes the browser window (or opens the explorer panel on the left) the column sizes get all messed up again. Not only that, but it only works in IE (6.0 I think), not Firefox, not tested in NS or others.


Tracy Dryden

Meddle not in the affairs of dragons,
For you are crunchy, and good with mustard.

 

[Vragabond]

Have you checked something like this:

http://www.imaputz.com/cssStuff/bigFourVersion.html

 

[traingamer]

I have to throw my two cents in with Foamcow, here. Why not just use <th> instead of another table for headers?

Greg
"Personally, I am always ready to learn, although I do not always like being taught." - Winston Churchill

 

[jsteph]

tsdragon
I would love to see a sample of the resizing code.

foamcow, traingamer
I need the header to stay fixed and only the table rows to scroll, and with the normal th or thead tags, the whole thing scrolls. There was code out there at the Code Project:

http://www.codeproject.com/jscript/scrollable_table.asp

...that worked excellent. It's automatic and easy...BUT...I need it to be native html as much as possible, where the above code takes an existing table, and in the onLoad of the page, it creates the separate tables for the header and rows. This works perfectly, and aligns them perfectly, partially, I think, because when the second table is created, it's done using cloneNode and appendChild, plus it goes through some resizing itself.

So what I did was take the resultant output and had my asp page create that 'multiple-table' html, along with the data. As I said, the scrolling part works perfectly, but since I'm not going through the resizing code from that link, the alignment isn't there. However, I did try calling the alignment functions that exist in the above link's source, and I can see the columns resize--but the still aren't perfect--I've done window.alert's to show the widths, and they still come out different, even though the padding, widths, etc, are all hardcoded identically.

I think part of it boils down to my not understanding the ActualWidth and Width properties, how they work, why they're different, etc. From looking at the code, it appears that Actualwidth is width less any padding--but I set all paddings, spacings, margins and borders to zero, just to remove these variables from the mix. I also set all data and column headings to contain much less data than would ever fill the cell--to avoid any wrapping/stretching issues.

So any help in explaining the whole concepts of what size I specify for a cell and what is actually rendered, would be greatly appreciated,
Thanks again,
--Jim

 

[JKdesignz]

you might try to put the tables in a div each and then align them via absolute postioning via style="position: absolute; left: **px; top: **px;"

Thou shalt be victorious!!

 

[tsdragon]

The code I have is also called from the onLoad event, and these is very little native HTML about it - it's all Javascript. However, if anyone is interested, here it is, without warranty of any kind.

function fixTables() {

  var numCols = 8;
  var colWidth = new Array(0,0,0,0,0,0,0,0);
  var colAdj   = new Array(new Array(0,0,0,0,0,0,0,0),new Array(0,0,0,0,0,0,0,0));
  
  // the client width bears a relationship to the width you set,
  // plus a factor for padding and spacing
  // however, the factor differs depending on what padding you set
  // all the tables we need to adjust have the same settings except
  // the header, so we have to calculate the adjustments for both

  // calculate the adjustments for the header and table rows
  for ( var nT = 0; nT < 2; nT++ ) {
    oTbl = document.getElementById("tbl_" + nT);
    // don't need to step thru all rows, just the first is all we need
    // step thru columns
    for ( var nC = 0; nC < oTbl.rows(0).cells.length; nC++ ) {
      oCell = oTbl.rows(0).cells(nC);
      cw = oCell.clientWidth;              // get client width
      oCell.width = cw+10;                // set cell to known width
      cwn = oCell.clientWidth;            // what does the client width say?
      adj = cwn - (cw+10);                // calculate the adjustment
      cwo = cw-adj;                        // calculate the cell's original width (w/o padding)
      oCell.width = (cwo > 0 ? cwo : 1);  //reset the cell to original size (but min of 1!!!)
      colAdj[nT][nC] = adj;                // save the adjustment for this col
    }
  }

  // now that we have the adjustments for the header and tables,  
  // step thru the tables and find the maximum col client widths
  for ( var nT = 0; nT < nTbls; nT++ ) {
    oTbl = document.getElementById("tbl_" + nT);
    nA = (nT == 0 ? 0 : 1);
    for ( var nC = 0; nC < oTbl.rows(0).cells.length; nC++ ) {
      cw = oTbl.rows(0).cells(nC).clientWidth;
      if ( cw > colWidth[nC] ) {
        colWidth[nC] = cw;        // save largest client width for this col
      }
    }
  }
  
  // now step thru the tables again, setting the column widths
  for ( var nT = 0; nT < nTbls; nT++ ) {
    oTbl = document.getElementById("tbl_" + nT);
    nA = (nT == 0 ? 0 : 1);
    for ( var nC = 0; nC < oTbl.rows(0).cells.length; nC++ ) {
      nw = colWidth[nC] - colAdj[nA][nC];
      oTbl.rows(0).cells(nC).width = (nw > 0 ? nw : 1);
    }
  }
  
} // fixTables()

Tracy Dryden

Meddle not in the affairs of dragons,
For you are crunchy, and good with mustard.

 

[oppcos]

If you would like to use only html and avoid javascript, here is a very good approximation of what I understand you are trying to achieve base on the codeproject screenshot:

<!-- HTML -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="Justin Williams" />
<meta name="keywords" content="vertical,test" />
<meta name="description" content="Vertical Test." />
<meta name="robots" content="all" />
<title>Liquid Test</title>
<script type="text/javascript"></script>
<style type ="text/css" media="all">
 @import "default.css";
</style>
</head>
<body>

<div id="header">This is the header.</div>
<div id="center"> 
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah<br /><br /><br /><br />
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah<br /><br /><br />blah blah blah blah 

blah blah blah blah blah blah blah blah blah blah blah<br /><br /><br />blah blah blah blah blah blah blah blah 

blah blah blah blah blah blah blah<br /><br /><br />
</div>
<div id="footer">This is the footer.</div>

</body>
</html>

Use that with the style sheet:

html {
height: 100%;
padding: 0;
margin: 0;
overflow: hidden;
}

body {
height: 100%;
padding: 0;
margin: 0;
overflow: hidden;
}

#header {
  position: relative;
  top: 0;
  left: 10%;
  height: 10%;
  width: 80%;
  margin: 0;
  padding: 0;
  background-color: #22F022;  }

#center {
position: absolute;
	       height: 80%;
	       width: 80%;
top: 10%;
left: 10%;
	       min-height: 80%;
	       margin: 0;
	       padding: 0;
	       background-color: #2222F0;
	       overflow: auto;
	       }

#footer {
  position: absolute;
  bottom: 0;
  left: 10%;
  height: 10%;
  width: 80%;
  margin: 0;
  padding: 0;
  background-color: #A02222;
  }

And you'll get the 100% HTML and style sheet effect of a header and footer with a scrollable center. See an example I uploaded to here. Be sure to resize the browser a lot to get all the effects. If you don't like the width to be liquid, replace percentages with ems or px or whatever you prefer.

 

[Vragabond]

I am still surprised why everyone keeps ignoring the nicely working css only table only solution provided in the link. True, the CSS is immense but also beautifully commented and shouldn't be much of a problem.

 

[Vragabond]

For yet another similar solution, tested to work in IE6 and Mozilla (where everything always works):

http://web.tampabay.rr.com/bmerkey/examples/nonscroll-table-header.html

 

[oppcos]

Vragabond, those are beautiful tables, and I'll give you a star just for pointing those out.

My impression, from the Codeproject reference however, was that the tables weren't going to be used for a dataset but rather for generic page layout. As such, the pure css scrollable tables you linked could get severely more complex as the page evolves its layout.

The solution, in my opinion, is to not use tables for layout at all. My experience is that table layout is easier to start with but gets exponentially more difficult and less cross-browser. CSS, on the hand, is much harder at first, but immediately accomplishes the goal and remains, by and large, easy to keep cross-browser. Thus I felt I had a valid alternative to add to the discussion.

 

[traingamer]

Ok, I finally reviewed Vragabond's first link.


Wow. That's what I'll use if I ever need it.

Greg
"Personally, I am always ready to learn, although I do not always like being taught." - Winston Churchill

 

[Vragabond]

Well, the first post was talking about fixed column headers, 15 columns and 50 rows which is clearly a case of tabular data. That is why I think solution with the divs is not applicable here. Other than that, I will always advocate the use of css and divs over tables.

 

[jsteph]

Thanks everyone, that's a lot to digest. I finally got my original thing to work without any code--my mistake was that I had was a bunch of 'style soup'. I thought I had a style set for a particular property, only to find I had overridden it in the tag itself. I also ended up putting a text input in each td and that seemed to be the magic bullet for stabilizing everything--once there was a textbox in every td it all fell into place.

Thanks again, and I'm going to be poring over tsdragon]s code and the other links--nothing like a good set of methods to choose from!
--Jim