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...
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... -----------------------------------
"Programming today is a race between software engineers striving to build bigger and better idiot-proof programs, and the Universe trying to produce bigger and better idiots. So far, the Universe is winning." - Rich Cook
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...
Code:
<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"> </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>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... -----------------------------------
"Programming today is a race between software engineers striving to build bigger and better idiot-proof programs, and the Universe trying to produce bigger and better idiots. So far, the Universe is winning." - Rich Cook