Page 1 of 2
Two Tables
Posted: Sat May 13, 2006 6:32 pm
by phppage
I am wanting to create two tables one in one div section and one in anoether div section. I want the first table to contain title details for the larger table under it. The problem I can not get around is to get the cells colums to line up with each other. I have looked through a table DOM there is and can not figure away round it at all.
Posted: Sat May 13, 2006 8:21 pm
by RobertGonzalez
Are you talking about making the top table cell widths be the same as the bottom table cell widths?
Posted: Sat May 13, 2006 8:28 pm
by phppage
Yes, sorry its 2:30 AM here and I have been going on this now since twelve. Getting mind freeze
Have tried the JS below but no change. The width object just returns null I guess.
Code: Select all
var x = document.getElementById('two').rows[0].cells
var y = document.getElementById('one').rows[0].cells
x[0].width = y[0].width;
x[1].width = y[1].width;
x[2].width = y[2].width;
x[3].width = y[3].width;
where 'two' and 'one' are table ids.
Posted: Sat May 13, 2006 9:43 pm
by RobertGonzalez
Do they have to be dynamic width, or can you just tell the cell width to be a fixed value?
Posted: Sun May 14, 2006 6:01 am
by phppage
Best to be dynamic. Tried the script from this link
http://www.quirksmode.org/js/fixedhead.html
could not get it to work. Think its a bit old as states page last changed 2 years ago and besides does not work on my Internet Explorer 6. Don't want the floating part of this script just want it fixed above the other table.
Posted: Sun May 14, 2006 10:35 am
by RobertGonzalez
OK, my next question is... why two tables? Is there any possibility that you can use one? Also, do you have any code that you can post or a location on the web we check out to see what is happening?
Posted: Sun May 14, 2006 11:02 am
by phppage
Have stripped out the php to create a demo code below
Code: Select all
<div id="head">
<table id="one" border="2" >
<tr class="tbhead" ><td id="type"></td><td id="fullname" >Full Name</td><td id="done"
>Action </td><td id="ip" >IP Address</td><td id="timeg" >Time</td></tr>
</table>
</div>
<div id="log">
<table id="two" border="2" >
<tr class="tblog" ><td id="type"></td><td id="fullname" >Joe Bloggs</td><td id="done"
>Edited Page</td><td id="ip" >10.101.1.1</td><td id="timeg" >19:48</td></tr>
<tr class="tblog" ><td id="type"></td><td id="fullname" >Joe Bloggs</td><td id="done"
>Edited Page</td><td id="ip" >10.101.1.1</td><td id="timeg" >19:48</td></tr>
<tr class="tbhead" ><td id="type"></td><td id="fullname" >Joe Bloggs</td><td id="done"
>Edited Page</td><td id="ip" >10.101.1.1</td><td id="timeg" >19:48</td></tr>
</table>
</div>
<br />
The first table contains the headers and the next all the log details. The log details are quite a few pages long so the css on div 'log' has the height set to a given figure and overflow to auto so a scroll affect occurs. But by doing two tables when the bottom div is scrolled the headers, the above table stay where it is. But of course this causes the problem of the width of the colums.
Posted: Sun May 14, 2006 11:16 am
by RobertGonzalez
If I am reading this right, you have a <div> that contains the header and just below it, you have a <div> with a fixed height property and a the overflow property set to scroll. So if the table is really long, the table will appear to scroll within a frame with the page? Is that correct?
I am not sure if this effect will work in IE6. I think IE chokes on the height property of the <div> element and auotmatically adjusts to the height of the content (though I could be wrong about this).
What about repeating row headers every X number of lines? Is that something that can be done? I'm just thinking of browser compatibility issues and the such.
Posted: Sun May 14, 2006 11:21 am
by phppage
Yep, thats correct. Set the overflow to scroll and that bit works fine. Its the column widths of the above and bottom table I cant get to marry up.
Posted: Sun May 14, 2006 11:33 am
by phppage
Everah wrote:
What about repeating row headers every X number of lines? Is that something that can be done? I'm just thinking of browser compatibility issues and the such.
Sorry missed your last line. Would like to avoid that as the header would contain sort by links so would prefer to keep them at the top.
Posted: Sun May 14, 2006 3:28 pm
by RobertGonzalez
Got me then. I know there are some client side gurus around that can do this. Have you checked out
A List Apart to see if they have anything in their tutorials about this?
Posted: Sun May 14, 2006 3:44 pm
by phppage
Will check it out. Many thanks for your time on this, its very appreciated.

Posted: Mon May 15, 2006 4:59 am
by matthijs
This should work
Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Untitled</title>
<style type="text/css">
<!--
table {
margin:0;
border-top:1px solid #ddd;
border-left:1px solid #ddd;
font-size:85%;
width:80%;
}
th, td {
border-right:1px solid #ddd;
border-bottom:1px solid #ddd;
padding:4px 10px;
text-align:center;
color:#333;
vertical-align:top;
width:20%;
background:#f4f4f4;
color:#222;
}
-->
</style>
</head>
<body>
<div id="head">
<table id="one" cellspacing="0">
<tr class="head" >
<td id="type"> </td>
<td id="fullname" >Full Name</td>
<td id="done">Action</td>
<td id="ip" >IP Address</td>
<td id="timeg" >Time</td>
</tr>
</table>
</div>
<div id="log">
<table id="two" cellspacing="0">
<tr class="tblog" >
<td class="type"> </td>
<td class="fullname" >Joe Bloggs</td>
<td class="done">Edited Page</td>
<td class="ip" >10.101.1.1</td>
<td class="timeg" >19:48</td></tr>
<tr class="tblog" >
<td class="type"> </td>
<td class="fullname" >Joe Bloggs</td>
<td class="done">Edited Page</td>
<td class="ip" >10.101.1.1</td>
<td class="timeg" >19:48</td>
</tr>
<tr class="tblog" >
<td class="type"> </td>
<td class="fullname" >Joe Bloggs</td>
<td class="done">Edited Page</td>
<td class="ip" >10.101.1.1</td>
<td class="timeg" >19:48</td>
</tr>
</table>
</div>
</body>
</html>
Of course you can change the table width to something else. I have it set to 80% in this case.
If I were you I would still try to do it in one table, as that is also better for the accessibility of the data. However, that's a choice depending on the purpose of the page and other factors.
Posted: Mon May 15, 2006 8:41 am
by RobertGonzalez
everah wrote:Do they have to be dynamic width, or can you just tell the cell width to be a fixed value?
phppage wrote:Best to be dynamic. Tried the script from this link
http://www.quirksmode.org/js/fixedhead.html
could not get it to work. Think its a bit old as states page last changed 2 years ago and besides does not work on my Internet Explorer 6. Don't want the floating part of this script just want it fixed above the other table.
I don't think the OP wants fixed width cells. I think he wants the header cells (in the upper div table) to adjust automatically to the width of the matching cells in the lower table.
Posted: Mon May 15, 2006 5:12 pm
by phppage
The problem is that the action column or fullname column can be any size.
I tried doing this via PHP, spent all evening doning this and it still dosen't work and this was very much plan Z rather than plan B. When the while loop was spitting out the data in the main bottom table I placed function in there to check and compare the length of every string with the last to see what the greatest length string was for each given field. At the end when both tables where complete I got a for loop to minus of the length of the orginal header and fill the differnce with  . Via Javascript and HTML DOM I then change the contents of each cell on the top table. The problem is of course is that most characters are wider than a space so too short. Have pasted the code below for what its worth. Probaly good that it didn't work I'm sure any great length of log would of killed the resources on the server.
Code: Select all
// Top Table
echo "<div id=\"mainside\">";
echo "<p class=\"CTitle\" align=\"center\">Activity Logs</p><br />";
echo "<div id=\"headtb\">";
echo "<table id=\"headtbt\" >";
echo "<tr class=\"tbhead\" ><td id=\"type\"></td><td id=\"fullname\" >Full Name</td><td id=\"done\" >Action</td><td id=\"ip\" >IP Address</td><td id=\"timeg\" >Time</td></tr>";
echo "</table>";
echo "</div>";
// Bottom table with log contents
echo "<div id=\"logtb\">";
echo "<table id=\"logtbt\" >";
$tal = "one"; // This just so you get a nice alternating bg colour.
function concheck($count,$column) { // Function to check if this is the longest string in the given column
if (strlen($column) > $count) { return strlen($column); } else { return $count; }
}
//Set counters to zero for each column
$fullnamecount = 0;
$donecount = 0;
$ipcount = 0;
$timegcount = 0;
//Spit out SQL Data into table
while ($test = @mysql_fetch_array($result, MYSQL_ASSOC)) {
// Check each column data for this given row to see if it is the longest and if so store this function or retirn the original
$fullnamecount = concheck($fullnamecount,$test[fullname]);
$donecount = concheck($donecount,$test[done]);
$ipcount = concheck($ipcount,$test[ip]);
$timegcount = concheck($timegcount,$test[timeg]);
// Echo Table Row
echo "<tr class=\"$tal\" ><td id=\"type\" >$test[type]</td><td id=\"fullname\" >$test[fullname]</td><td id=\"done\" >$test[done]</td><td id=\"ip\" >$test[ip]</td><td id=\"timeg\" >$test[timeg]</td></tr>";
// Just the bg colour again
if ($tal == "one") { $tal = "two"; } else { $tal = "one"; }
}
// Finish table off with both divs
echo "</table>";
echo "</div>";
echo "</div>";
/* function that takes the longest length, $Count and minus of the length of desired text, $header then corrects
in the given cell, $cell in the top table */
function getspace($count,$cell,$header) {
$count = $count - strlen($header);
$count = $count * 1.25; // Tried to pan it out a bit but completely messed up.
for ($i = 1; $i <= $count; $i++) {
$header = $header.' ';
}
echo "var x=document.getElementById('headtbt').rows[0].cells;
x[$cell].innerHTML=\"$header\";
";
} // End of function
echo "
<script language=\"Javascript\" type=\"text/javascript\">
";
getspace($fullnamecount,'1','Fullname');
getspace($donecount,'2','Action');
getspace($ipcount,'3','IP Address');
getspace($timegcount,'4','Time');
getspace('3','0','*'); // To be removed after image added. This column will be an image when complete.
echo "</script>";