Aligning 2 Tables - going slowly mad!!!

[blondy]

Hi Folks,

Is there a bulletproof way to align the cells of 2 tables? I am trying to have a header row that contains the column headings remains static (one table) and another table that displays the(dynamically drawn from DB) data within a <div> so that it scrolls. The columns need to line up.

My problem is that I don't know how long the data going in will be, so I need it to wrap within the cell. I thought I had it with the code below, but just discovered that when it is viewed at a larger screen resolution NOTHING lines up.

I have posted the code that works at 800x600 below. I'm happy to use CSS, tables, ANYTHING so that I get a reliable result. If anyone could help I would be very grateful.

Sorry if the code doesn't look to good, ignore the php bits...

Code follows:

		<table cellspacing="0" width="100%" cellpadding="0"><tr><td><!-- Holding Table -->
        <table border="0" width="100%" cellspacing="0" cellpadding="5" id="tabhd">
            <td width="1%"><img src="images/spacer.gif" width="250"><br><a href="<?php echo $_Ref ; ?>1" id=ttl>Title</a></td>
            <td width="1%"><img src="images/spacer.gif" width="100"><br><a href="<?php echo $_Ref ; ?>2" id=ttl>Author</a></td>
            <td width="1%"><img src="images/spacer.gif" width="70"><br><a href="<?php echo $_Ref ; ?>3" id=ttl>Call No.</a></td>
            <td align="center" width="1%"><img src="images/spacer.gif" width="40"><br><a href="<?php echo $_Ref ; ?>4" id=ttl>Type</a></td>
            <td width="1%"><img src="images/spacer.gif" width="50"><br><a href="<?php echo $_Ref ; ?>5" id=ttl>Copies</a></td>
            <td width="1%"><img src="images/spacer.gif" width="40"><br>&nbsp;</td>
            <td width="1%"><img src="images/spacer.gif" width="40"><br>&nbsp;</td>
            <td width="0%"><img src="images/spacer.gif" width="15"><br>&nbsp;</td>
        </table>
      </td></tr>
  <tr> 
    <td><div align="left" style="overflow:auto; height: 200;"> 
        <table border="0" cellspacing="0" cellpadding="5" id="scrollTable">
          <tr> 
            <td class="lline" width="1%"><img src="images/spacer.gif" width="250"><br><?php echo $row[0]; ?></td>
            <td class="lline" width="1%"><img src="images/spacer.gif" width="100"><br><?php echo $row[1]; ?></td>
            <td class="lline" width="1%"><img src="images/spacer.gif" width="70"><br><?php echo $row[2]; ?></td>
			<?php if (TRIM($row[3]) == '[URL unfurl="true"]WWW')[/URL] {  ?>
			    <td class="lline" align="center" width="1%"><img src="images/spacer.gif" width="40"><br><a href="<?php echo TRIM($row[7]); ?>"><?php TRIM($row[7]); ?></a></td>
            <?php } else { ?>
                <td class="lline" align="center" width="1%"><img src="images/spacer.gif" width="40"><br><?php echo $row[3]; ?></td>
            <?php }  ?> 
            <td class="lline" width="1%"><img src="images/spacer.gif" width="50"><br><?php echo $copies; ?></td>
            <td class="lline" width="1%"><img src="images/spacer.gif" width="40"><br><a href="cmedetails.php<?php echo $_Notes; ?>"><?php echo 'Details' ?></a></td>
            <td class="lline" width="1%"><img src="images/spacer.gif" width="40"><br><a href="cmereserve.php<?php echo $_Reserve; ?>"><?php echo 'Reserve' ?></a></td>
          </tr>
          <?php } ?>
        </table>
      </div>
	  </td></tr></table><!--Close Holding table -->

Therese

&quot;Time is an illusion. Lunchtime doubly so.&quot; Douglas Adams. (1952 - 2001)

 

[tviman]

The biggest problem you're having is that the upper table can't account for the bottom table scoll bar. You have 8 columns of supposedly equal widths but the scroll bar in the lower table throws this all out of wack. Then, as you've noted, when you change resolutions, everything gets worse. This is caused by the use of percentages in the <table> tags.

I've never had to fix a problem like this but I suggest that you create the table with a width of 780 pixels and use this for any screen resolution. Then, rather than two tables, create a graphic for the upper table (you'll have to play with it a little to get it to match the lower table) and position it in a <div> above the scrollable table.

There's always a better way. The fun is trying to find it!

 

[BillyRayPreachersSon]

Switch to using one table instead. You can never guarantee that two different tables will line up at all resolutions 100% of the time.

Dan