?
Solved

Table Column headers & Table Column values issue !

Posted on 2003-03-08
4
Medium Priority
?
187 Views
Last Modified: 2010-04-09
Hi,

   Usually when we have to display a table with data with a header we simply do it easily. Ex:
   <table>
   <tr>
     <th>Name</th>
     <th>Age</th>
   </tr>
   <tr>
     <td>Rajiv</td>
     <td>23</td>
   </tr>
   <tr>
     <td>Ashu</td>
     <td>24</td>
   </tr>
   </table>

   simple! ... As the number of rows of data increase, the table get taller. Our requirement says that we shouldnt leave the scrollbar for the browser to decide. That means, even if the table has 100 or 1000 rows, the browser scroll must not appear.
    the obvious solution was <div> with 'overflow' attribute set suitably. for this:

   <table>
   <tr>
     <th>Name</th>
     <th>Age</th>
   </tr>
   <div style="overflow:auto;">
   <tr>
     <td>Rajiv</td>
     <td>23</td>
   </tr>
   <tr>
     <td>Ashu</td>
     <td>24</td>
   </tr>
   </div>
   </table>

This will not work!!!!! What works is:

   <table>
   <tr>
     <th>Name</th>
     <th>Age</th>
   </tr>
   </table>
   <div style="overflow:auto;">
   <table>
   <tr>
     <td>Rajiv</td>
     <td>23</td>
   </tr>
   <tr>
     <td>Ashu</td>
     <td>24</td>
   </tr>
   </table>
   </div>

The result... 2 different tables! One for HEADER and one for DATA.

Now, what we have done during this process is a disconnected the HEADER and DATA, in the sense that, the widths of the TDs in the tables have to be somehow kind off synchonised.

Because, the rows in DATA table come from DB, their widths get adjusted. Now the thing is the HEADER tds must adjust with this.

Any inputs how it can acheived! you help with be useful for a 180 sized team project! :)

regards,
rajiv.
0
Comment
Question by:rajivraj164
  • 2
4 Comments
 
LVL 5

Expert Comment

by:cirtap
ID: 8093626
Hi Rajiv,
of course the first will not work as a DIV is not valid inside a TABLE between rows. Put the DIV around the whole table and maybe give it some additional style like height and clip:rect().

<div style="overflow:auto;">
<table>
  <tr> <th>Name</th> <th>Age</th> </tr>
  <tr> <td>Rajiv</td><td>23</td>  </tr>
  <tr> <td>Ashu</td> <td>24</td>  </tr>
</table>
</div>

In a TABLE only THEAD, TFOOT, TBODY and TR are valid and rendered correctly.

Alternatively you may put the TABLE in it's own file and use an IFRAME to show it, this way the IFRAME will show scrollbars as needed and you don't have to bother with "misusing" a DIV.

CirTap
0
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 1000 total points
ID: 8094071
Just use an expression to keep them in synch at all resolutions and screen sizes:

<html>
<head>
<script language="javascript">
window.onload = init;
function init() {
var eTable = document.getElementById("headers");
eTable.style.setExpression("width","document.getElementById('data').offsetWidth");

}
</script>
<style>
table#headers, table#data {table-layout:fixed;background:#dda0dd;}
td, th {vertical-align:top;background:#ffffff;}
</style>
</head>
<body>
<table cellpadding="4" cellspacing="1" id="headers">
<col width="20%">
<col width="20%">
<col width="20%">
<col width="20%">
<tr>
<th>Test</th>
<th>Hello</th>
<th>Yoohoo</th>
<th>Hmm</th>
</tr>
</table>
<div style="width:100%;height:300px;overflow-y:auto;">
<table cellpadding="4" cellspacing="1" width="100%" id="data">
<col width="20%">
<col width="20%">
<col width="20%">
<col width="20%">
<tr>
<td>Data</td>
<td>Hello</td>
<td>I am here and so are you</td>
<td>Yoohoo</td>
</tr>
<tr>
<td>Data</td>
<td>Hello</td>
<td>I am here and so are you</td>
<td>Yoohoo</td>
</tr>
<tr>
<td>Data</td>
<td>Hello</td>
<td>I am here and so are you</td>
<td>Yoohoo</td>
</tr>
<tr>
<td>Data</td>
<td>Hello</td>
<td>I am here and so are you</td>
<td>Yoohoo</td>
</tr>
<tr>
<td>Data</td>
<td>Hello</td>
<td>I am here and so are you</td>
<td>Yoohoo</td>
</tr>
<tr>
<td>Data</td>
<td>Hello</td>
<td>I am here and so are you</td>
<td>Yoohoo</td>
</tr>
<tr>
<td>Data</td>
<td>Hello</td>
<td>I am here and so are you</td>
<td>Yoohoo</td>
</tr>
<tr>
<td>Data</td>
<td>Hello</td>
<td>I am here and so are you</td>
<td>Yoohoo</td>
</tr>
<tr>
<td>Data</td>
<td>Hello</td>
<td>I am here and so are you</td>
<td>Yoohoo</td>
</tr>
<tr>
<td>Data</td>
<td>Hello</td>
<td>I am here and so are you</td>
<td>Yoohoo</td>
</tr>
<tr>
<td>Data</td>
<td>Hello</td>
<td>I am here and so are you</td>
<td>Yoohoo</td>
</tr>
<tr>
<td>Data</td>
<td>Hello</td>
<td>I am here and so are you</td>
<td>Yoohoo</td>
</tr>
<tr>
<td>Data</td>
<td>Hello</td>
<td>I am here and so are you</td>
<td>Yoohoo</td>
</tr>
</table>
</div>
</body>
</html>


I believe IE only anything else you would have to re-size on a change in screen size, and set dynamicaly at load time.

Cd&
0
 

Author Comment

by:rajivraj164
ID: 8100818
simply superb :)
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 8103024
Glad we could help. Thanks for the A. :^)

Cd&
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
Find out what you should include to make the best professional email signature for your organization.
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

615 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question