PDA

View Full Version : how to maintain width of td from two tables?

Shaithis
12-10-2002, 10:42 AM
Hello, I'm trying to find a way to maintain the width of tds for two tables. This is to be used in IE only as the platform is win32 specific.

Here's the scenario.

I need to display a table with a row of titles and multiple rows of whatever data available. I also wish to have the data in a scrollable grid. To do this, the only way I've found is th have a 2nd table within a <div style="height:200px;overflow:auto"> and of course, if the data is wider than the specified width of the cell, it will resize. I need to keep the first row resized to the same width.

This is what I came up with the first time...

<html>
<head><title>Untitled</title></head>
<script language="javascript">
function setWidth()
{ c1.style.width=d1.clientWidth;
c2.style.width=d2.clientWidth;
c3.style.width=d3.clientWidth;
}
</script>
<body onload="setWidth()" onresize="setWidth()">
<form>
<table border=1 bordercolor="#000000"><tr><td>
<table width="100%" cellspacing=2>
<tr><td id=c1 bgcolor="#FFFF80">col-1</td><td id=c2 bgcolor="#FFFF80">col_2</td><td id=c3 bgcolor="#FFFF80">col_3</td><td bgcolor="#FFFF80" width="12">&nbsp;</td>
</tr></table>
</td></tr>
<tr><td>
<div style="height:100px;overflow:auto">
<table width="100%" bordercolor="#ff0000" cellspacing=0 cellpadding=00 border=1>
<tr><td id=d1>d_1</td><td id=d2>d_2</td><td id=d3>d_3</td></tr>
<tr><td>ed_1</td><td>ed_2</td><td>ed_3</td></tr>
<tr><td>rd_1</td><td>rd_2</td><td>rd_3</td></tr>
<tr><td>ttttttttd_1</td><td>ttttttd_2</td><td>ttttttd_3</td></tr>
<tr><td>dh_1</td><td>dh_2</td><td>dh_3</td></tr>
<tr><td>dk_1</td><td>dkkkkkkkkkkkkkkkk_2</td><td>dkkk_3</td></tr>
</table>
</div>
</td>
</tr>
</table>
</form>
</body>
</html>

You'll notice some weirdness when resizing your browser. Also if the grid is very large, resizing will strain IE.

BTW, the above code seems to only work in IE

Can anyone suggest a better way to do this, placing a lesser strain on resources.

I tried with CSS but that seems to lock my browser when lots of data is displayed.

Thanks in advance...
DCElliott
12-10-2002, 03:24 PM
A couple of points.

You need to use a style for the table to say that it uses fixed dimensions. I think non-breaking content that is too large will disappear off the edge of the cell - you'll have to check.

<style><!--
table.fixed {display:table; table-layout:fixed}
You then should define some column classes:
.c1 {width:__;} /*set widths*/
.c2 {width:__;}
.c3 {width:__;}
. . .
-->
</style>
in your html
<table class="fixed">
<col class="c1" /> <col class="c2" /><col class="c3" />
<tr><td>ed_1</td><td>ed_2</td><td>ed_3</td>
</tr>
<tr><td>rd_1</td><td>rd_2</td><td>rd_3</td>
</tr>
<tr><td>ttttttttd_1</td><td>ttttttd_2</td><td>ttttttd_3</td>
</tr>
<tr><td>dh_1</td><td>dh_2</td><td>dh_3</td>
</tr>
. . .
</table>
<tr><td>dk_1</td><td>dkkkkkkkkkkkkkkkk_2</td><td>dkkk_3</td>
</tr>
BTW - get in the habit of making all your tags and attributes lower case and properly quoted. You'll be better prepared for writing XHTML when th time comes.