Two Tables

JavaScript and client side scripting.

Moderator: General Moderators

User avatar
phppage
Forum Contributor
Posts: 126
Joined: Mon Apr 24, 2006 1:47 pm
Location: West Yorkshire, UK

Two Tables

Post 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.
User avatar
RobertGonzalez
Site Administrator
Posts: 14293
Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA

Post by RobertGonzalez »

Are you talking about making the top table cell widths be the same as the bottom table cell widths?
User avatar
phppage
Forum Contributor
Posts: 126
Joined: Mon Apr 24, 2006 1:47 pm
Location: West Yorkshire, UK

Post by phppage »

Yes, sorry its 2:30 AM here and I have been going on this now since twelve. Getting mind freeze :? :lol:

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.
User avatar
RobertGonzalez
Site Administrator
Posts: 14293
Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA

Post by RobertGonzalez »

Do they have to be dynamic width, or can you just tell the cell width to be a fixed value?
User avatar
phppage
Forum Contributor
Posts: 126
Joined: Mon Apr 24, 2006 1:47 pm
Location: West Yorkshire, UK

Post 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.
User avatar
RobertGonzalez
Site Administrator
Posts: 14293
Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA

Post 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?
User avatar
phppage
Forum Contributor
Posts: 126
Joined: Mon Apr 24, 2006 1:47 pm
Location: West Yorkshire, UK

Post 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.
User avatar
RobertGonzalez
Site Administrator
Posts: 14293
Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA

Post 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.
User avatar
phppage
Forum Contributor
Posts: 126
Joined: Mon Apr 24, 2006 1:47 pm
Location: West Yorkshire, UK

Post 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.
User avatar
phppage
Forum Contributor
Posts: 126
Joined: Mon Apr 24, 2006 1:47 pm
Location: West Yorkshire, UK

Post 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.
User avatar
RobertGonzalez
Site Administrator
Posts: 14293
Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA

Post 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?
User avatar
phppage
Forum Contributor
Posts: 126
Joined: Mon Apr 24, 2006 1:47 pm
Location: West Yorkshire, UK

Post by phppage »

Will check it out. Many thanks for your time on this, its very appreciated. :D
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post 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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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.
User avatar
RobertGonzalez
Site Administrator
Posts: 14293
Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA

Post 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.
User avatar
phppage
Forum Contributor
Posts: 126
Joined: Mon Apr 24, 2006 1:47 pm
Location: West Yorkshire, UK

Post 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 &nbsp. 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.'&nbsp';
 }
 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>";
Post Reply