?
Solved

Table Column headers & Table Column values issue !

Posted on 2003-03-08
4
Medium Priority
?
186 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

On Demand Webinar: Networking for the Cloud Era

Ready to improve network connectivity? Watch this webinar to learn how SD-WANs and a one-click instant connect tool can boost provisions, deployment, and management of your cloud connection.

Question has a verified solution.

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

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses

770 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