Two Tables
Moderator: General Moderators
Two Tables
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.
- RobertGonzalez
- Site Administrator
- Posts: 14293
- Joined: Tue Sep 09, 2003 6:04 pm
- Location: Fremont, CA, USA
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.
where 'two' and 'one' are table ids.
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;- RobertGonzalez
- Site Administrator
- Posts: 14293
- Joined: Tue Sep 09, 2003 6:04 pm
- Location: Fremont, CA, USA
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.
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.
- RobertGonzalez
- Site Administrator
- Posts: 14293
- Joined: Tue Sep 09, 2003 6:04 pm
- Location: Fremont, CA, USA
Have stripped out the php to create a demo code below
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.
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 />
- RobertGonzalez
- Site Administrator
- Posts: 14293
- Joined: Tue Sep 09, 2003 6:04 pm
- Location: Fremont, CA, USA
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.
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.
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.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.
- RobertGonzalez
- Site Administrator
- Posts: 14293
- Joined: Tue Sep 09, 2003 6:04 pm
- Location: Fremont, CA, USA
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?
This should work
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.
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>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.
- RobertGonzalez
- Site Administrator
- Posts: 14293
- Joined: Tue Sep 09, 2003 6:04 pm
- Location: Fremont, CA, USA
everah wrote:Do they have to be dynamic width, or can you just tell the cell width to be a fixed value?
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.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.
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.
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>";