wood burning stoves 2.0*
The moose likes HTML, CSS and JavaScript and the fly likes Resizing table width upon page load Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login


Win a copy of Murach's Java Servlets and JSP this week in the Servlets forum!
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "Resizing table width upon page load" Watch "Resizing table width upon page load" New topic
Author

Resizing table width upon page load

Ram Thirumangalam
Greenhorn

Joined: Aug 28, 2003
Posts: 20
Hi
I am trying to resize the width of a table dynamically onload. However, it doesnt seem to work. Eric, this is regarding the table scroll. I have looked at the code posted in one of these forums but still, the columns donot align properly.
I tried to do this dynamically on page load using the script in this code but somehow it doest resize the header table.
Here is the code. I really appreciate if somecan can assist me finding out what is wrong with the code.
Thanks
<HTML>
<head>
<STYLE>
.PlaceHolder
{
BORDER-RIGHT: lightgrey outset;
BORDER-TOP: lightgrey outset;
FONT-WEIGHT: bolder;
FONT-SIZE: 11;
BORDER-LEFT: lightgrey outset;
COLOR: black;
BORDER-BOTTOM: lightgrey outset;
FONT-FAMILY: Tahoma, Arial, Helvetica;
BACKGROUND-COLOR: lightgrey
}
.RowElementWhite
{
FONT-WEIGHT: lighter;
FONT-SIZE: 10;
COLOR: black;
FONT-FAMILY: Tahoma, Arial, Helvetica;
BACKGROUND-COLOR: white
}
.RowElementGray
{
FONT-WEIGHT: lighter;
FONT-SIZE: 10;
COLOR: black;
FONT-FAMILY: Tahoma, Arial, Helvetica;
BACKGROUND-COLOR: lightgrey
}
.RowHighlight
{
FONT-WEIGHT: lighter;
FONT-SIZE: 10;
COLOR: white;
FONT-FAMILY: Tahoma, Arial, Helvetica;
BACKGROUND-COLOR: black
}
.tblscroll
{
overflow: auto;
height:90%;
width:"710";
}
</STYLE>
<script type="text/javascript">
function resizeScrollTable()
{
var scrollBarWidth = document.getElementbyId("divis").offsetWidth - document.getElementbyId("divis").clientWidth;
document.getElementbyId("test").width = document.getElementbyId
("divis").clientWidth;
//document.getElementbyId("test").Width = "694"; --this doesnt work either
}
window.attachEvent("onload", function () {resizeScrollTable();} );
</script>
</head>
<body bgcolor=white topmargin=0 leftmargin=0 rightmargin=0 bottommargin=0>
<table id='test' cellpadding=0 cellspacing=2 border=0 bordercolor=black width="710">
<TR valign=middle>
<td id=Header0 class=PlaceHolder width="120" align=middle bgcolor=lightgrey>date</td>
<td id=Header1 class=PlaceHolder width="130" align=middle
bgcolor=lightgrey>Inv Number</td>
<td id=Header2 class=PlaceHolder width="110" align=middle
bgcolor=lightgrey>Payer ID</td>
<td id=Header3 class=PlaceHolder width="130" align=middle bgcolor=lightgrey>Pages</td>
<td id=Header4 class=PlaceHolder width="120" align=middle bgcolor=lightgrey
>Language</td>
<td id=Header5 class=PlaceHolder width="100" align=middle bgcolor=lightgrey >Zip</td>
</TR>
</table>
<div id='div1' class=tblscroll>
<TABLE CELLSPACING=0
Cellpadding=4
border=1 bordercolor=lightgrey >
<TR id='Row0' class=RowElementWhite>
<TD id='colid01' width="120"> 11-10-2003 </TD>
<TD id='colid02' width="130" align=right> 62067767 </TD>
<TD id='colid03' width="110" align=right>&nbsp;</TD>
<TD id='colid04' width="130" align=right> 2 </TD>
<TD id='colid05' width="120"> English </TD>
<TD id='colid06' width="100"> &nbsp;</TD>
<TD id='colid07' width="0" style='display:none;'>0</TD></TR>
<TR id='Row1' class=RowElementGray>
<TD id='colid1001' width="120"> 11-10-2003 </TD>
<TD id='colid1002' width="130" align=right> 62067746 </TD>
<TD id='colid1003' width="110" align=right> Y0026623 </TD>
<TD id='colid1004' width="130" align=right> 68 </TD>
<TD id='colid1005' width="120"> English </TD>
<TD id='colid1006' width="100"> &nbsp;</TD>
<TD id='colid1007' width="0" style='display:none;'>1</TD></TR>
<TR id='Row2' class=RowElementWhite>
<TD id='colid2001' width="120"> 11-10-2003 </TD>
<TD id='colid2002' width="130" align=right> 000162067746 </TD>
<TD id='colid2003' width="110" align=right> Y0026623 </TD>
<TD id='colid2004' width="130" align=right> 2 </TD>
<TD id='colid2005' width="120"> English </TD>
<TD id='colid2006' width="100"> &nbsp;</TD>
<TD id='colid2007' width="0" style='display:none;'>2</TD></TR>
<TR id='Row3' class=RowElementGray>
<TD id='colid3001' width="120"> 11-10-2003 </TD>
<TD id='colid3002' width="130" align=right> 000262067746 </TD>
<TD id='colid3003' width="110" align=right> Y0026623 </TD>
<TD id='colid3004' width="130" align=right> 63 </TD>
<TD id='colid3005' width="120"> English </TD>
<TD id='colid3006' width="100"> &nbsp;</TD>
<TD id='colid3007' width="0" style='display:none;'>3</TD></TR>
<TR id='Row4' class=RowElementWhite>
<TD id='colid4001' width="120"> 11-10-2003 </TD>
<TD id='colid4002' width="130" align=right> 000362067746 </TD>
<TD id='colid4003' width="110" align=right> Y0026623 </TD>
<TD id='colid4004' width="130" align=right> 3 </TD>
<TD id='colid4005' width="120"> English </TD>
<TD id='colid4006' width="100"> &nbsp;</TD>
<TD id='colid4007' width="0" style='display:none;'>4</TD></TR>
<TR id='Row5' class=RowElementGray>
<TD id='colid5001' width="120"> 11-10-2003 </TD>
<TD id='colid5002' width="130" align=right> 000462067746 </TD>
<TD id='colid5003' width="110" align=right> Y0026623 </TD>
<TD id='colid5004' width="130" align=right> 2 </TD>
<TD id='colid5005' width="120"> English </TD>
<TD id='colid5006' width="100"> &nbsp;</TD>
<TD id='colid5007' width="0" style='display:none;'>5</TD></TR>

<TR id='Row6' class=RowElementWhite>
<TD id='colid6001' width="120"> 11-10-2003 </TD>
<TD id='colid6002' width="130" align=right> 62067752 </TD>
<TD id='colid6003' width="110" align=right> Y1710717 </TD>
<TD id='colid6004' width="130" align=right> 9 </TD>
<TD id='colid6005' width="120"> English </TD>
<TD id='colid6006' width="100"> &nbsp;</TD>
<TD id='colid6007' width="0" style='display:none;'>6</TD></TR>
<TR id='Row7' class=RowElementGray>
<TD id='colid7001' width="120"> 11-10-2003 </TD>
<TD id='colid7002' width="130" align=right> 000162067752 </TD>
<TD id='colid7003' width="110" align=right> Y1710717 </TD>
<TD id='colid7004' width="130" align=right> 3 </TD>
<TD id='colid7005' width="120"> English </TD>
<TD id='colid7006' width="100"> &nbsp;</TD>
<TD id='colid7007' width="0" style='display:none;'>7</TD></TR>
<TR id='Row8' class=RowElementWhite>
<TD id='colid8001' width="120"> 11-10-2003 </TD>
<TD id='colid8002' width="130" align=right> 62067753 </TD>
<TD id='colid8003' width="110" align=right> Y1710718 </TD>
<TD id='colid8004' width="130" align=right> 46 </TD>
<TD id='colid8005' width="120"> English </TD>
<TD id='colid8006' width="100"> &nbsp;</TD>
<TD id='colid8007' width="0" style='display:none;'>8</TD></TR>
<TR id='Row9' class=RowElementGray>
<TD id='colid9001' width="120"> 11-10-2003 </TD>
<TD id='colid9002' width="130" align=right> 000162067753 </TD>
<TD id='colid9003' width="110" align=right> Y1710718 </TD>
<TD id='colid9004' width="130" align=right> 29 </TD>
<TD id='colid9005' width="120"> English </TD>
<TD id='colid9006' width="100"> &nbsp;</TD>
<TD id='colid9007' width="0" style='display:none;'>9</TD></TR>
<TR id='Row9' class=RowElementWhite>
<TD id='colid9001' width="120"> 11-10-2003 </TD>
<TD id='colid9002' width="130" align=right> 000162067753 </TD>
<TD id='colid9003' width="110" align=right> Y1710718 </TD>
<TD id='colid9004' width="130" align=right> 29 </TD>
<TD id='colid9005' width="120"> English </TD>
<TD id='colid9006' width="100"> &nbsp;</TD>
<TD id='colid9007' width="0" style='display:none;'>9</TD></TR>
<TR id='Row9' class=RowElementGray onmouseover="this.style.cursor='hand'">
<TD id='colid9001' width="120"> 11-10-2003 </TD>
<TD id='colid9002' width="130" align=right> 000162067753 </TD>
<TD id='colid9003' width="110" align=right> Y1710718 </TD>
<TD id='colid9004' width="130" align=right> 29 </TD>
<TD id='colid9005' width="120"> English </TD>
<TD id='colid9006' width="100"> &nbsp;</TD>
<TD id='colid9007' width="0" style='display:none;'>9</TD></TR>
<TR id='Row9' class=RowElementGray>
<TD id='colid9001' width="120"> 11-10-2003 </TD>
<TD id='colid9002' width="130" align=right> 000162067753 </TD>
<TD id='colid9003' width="110" align=right> Y1710718 </TD>
<TD id='colid9004' width="130" align=right> 29 </TD>
<TD id='colid9005' width="120"> English </TD>
<TD id='colid9006' width="100"> &nbsp;</TD>
<TD id='colid9007' width="0" style='display:none;'>9</TD></TR>
<TR id='Row9' class=RowElementWhite>
<TD id='colid9001' width="120"> 11-10-2003 </TD>
<TD id='colid9002' width="130" align=right> 000162067753 </TD>
<TD id='colid9003' width="110" align=right> Y1710718 </TD>
<TD id='colid9004' width="130" align=right> 29 </TD>
<TD id='colid9005' width="120"> English </TD>
<TD id='colid9006' width="100"> &nbsp;</TD>
<TD id='colid9007' width="0" style='display:none;'>9</TD></TR>
<TR id='Row9' class=RowElementGray>
<TD id='colid9001' width="120"> 11-10-2003 </TD>
<TD id='colid9002' width="130" align=right> 000162067753 </TD>
<TD id='colid9003' width="110" align=right> Y1710718 </TD>
<TD id='colid9004' width="130" align=right> 29 </TD>
<TD id='colid9005' width="120"> English </TD>
<TD id='colid9006' width="100"> &nbsp;</TD>
<TD id='colid9007' width="0" style='display:none;'>9</TD></TR>
<TR id='Row9' class=RowElementWhite>
<TD id='colid9001' width="120"> 11-10-2003 </TD>
<TD id='colid9002' width="130" align=right> 000162067753 </TD>
<TD id='colid9003' width="110" align=right> Y1710718 </TD>
<TD id='colid9004' width="130" align=right> 29 </TD>
<TD id='colid9005' width="120"> English </TD>
<TD id='colid9006' width="100"> &nbsp;</TD>
<TD id='colid9007' width="0" style='display:none;'>9</TD></TR>
<TR id='Row9' class=RowElementGray>
<TD id='colid9001' width="120"> 11-10-2003 </TD>
<TD id='colid9002' width="130" align=right> 000162067753 </TD>
<TD id='colid9003' width="110" align=right> Y1710718 </TD>
<TD id='colid9004' width="130" align=right> 29 </TD>
<TD id='colid9005' width="120"> English </TD>
<TD id='colid9006' width="100"> &nbsp;</TD>
<TD id='colid9007' width="0" style='display:none;'>9</TD></TR>
<TR id='Row9' class=RowElementWhite>
<TD id='colid9001' width="120"> 11-10-2003 </TD>
<TD id='colid9002' width="130" align=right> 000162067753 </TD>
<TD id='colid9003' width="110" align=right> Y1710718 </TD>
<TD id='colid9004' width="130" align=right> 29 </TD>
<TD id='colid9005' width="120"> English </TD>
<TD id='colid9006' width="100"> &nbsp;</TD>
<TD id='colid9007' width="0" style='display:none;'>9</TD></TR>
<TR id='Row9' class=RowElementGray>
<TD id='colid9001' width="120"> 11-10-2003 </TD>
<TD id='colid9002' width="130" align=right> 000162067753 </TD>
<TD id='colid9003' width="110" align=right> Y1710718 </TD>
<TD id='colid9004' width="130" align=right> 29 </TD>
<TD id='colid9005' width="120"> English </TD>
<TD id='colid9006' width="100"> &nbsp;</TD>
<TD id='colid9007' width="0" style='display:none;'>9</TD></TR>
<TR id='Row9' class=RowElementWhite>
<TD id='colid9001' width="120"> 11-10-2003 </TD>
<TD id='colid9002' width="130" align=right> 000162067753 </TD>
<TD id='colid9003' width="110" align=right> Y1710718 </TD>
<TD id='colid9004' width="130" align=right> 29 </TD>
<TD id='colid9005' width="120"> English </TD>
<TD id='colid9006' width="100"> &nbsp;</TD>
<TD id='colid9007' width="0" style='display:none;'>9</TD></TR>
<TR id='Row9' class=RowElementGray>
<TD id='colid9001' width="120"> 11-10-2003 </TD>
<TD id='colid9002' width="130" align=right> 000162067753 </TD>
<TD id='colid9003' width="110" align=right> Y1710718 </TD>
<TD id='colid9004' width="130" align=right> 29 </TD>
<TD id='colid9005' width="120"> English </TD>
<TD id='colid9006' width="100"> &nbsp;</TD>
<TD id='colid9007' width="0" style='display:none;'>9</TD></TR>
<TR id='Row9' class=RowElementWhite>
<TD id='colid9001' width="120"> 11-10-2003 </TD>
<TD id='colid9002' width="130" align=right> 000162067753 </TD>
<TD id='colid9003' width="110" align=right> Y1710718 </TD>
<TD id='colid9004' width="130" align=right> 29 </TD>
<TD id='colid9005' width="120"> English </TD>
<TD id='colid9006' width="100"> &nbsp;</TD>
<TD id='colid9007' width="0" style='display:none;'>9</TD></TR>
<TR id='Row9' class=RowElementGray>
<TD id='colid9001' width="120"> 11-10-2003 </TD>
<TD id='colid9002' width="130" align=right> 000162067753 </TD>
<TD id='colid9003' width="110" align=right> Y1710718 </TD>
<TD id='colid9004' width="130" align=right> 29 </TD>
<TD id='colid9005' width="120"> English </TD>
<TD id='colid9006' width="100"> &nbsp;</TD>
<TD id='colid9007' width="0" style='display:none;'>9</TD></TR>
<TR id='Row9' class=RowElementWhite>
<TD id='colid9001' width="120"> 11-10-2003 </TD>
<TD id='colid9002' width="130" align=right> 000162067753 </TD>
<TD id='colid9003' width="110" align=right> Y1710718 </TD>
<TD id='colid9004' width="130" align=right> 29 </TD>
<TD id='colid9005' width="120"> English </TD>
<TD id='colid9006' width="100"> &nbsp;</TD>
<TD id='colid9007' width="0" style='display:none;'>9</TD></TR>
<TR id='Row9' class=RowElementGray>
<TD id='colid9001' width="120"> 11-10-2003 </TD>
<TD id='colid9002' width="130" align=right> 000162067753 </TD>
<TD id='colid9003' width="110" align=right> Y1710718 </TD>
<TD id='colid9004' width="130" align=right> 29 </TD>
<TD id='colid9005' width="120"> English </TD>
<TD id='colid9006' width="100"> &nbsp;</TD>
<TD id='colid9007' width="0" style='display:none;'>9</TD></TR>
<TR id='Row9' class=RowElementWhite>
<TD id='colid9001' width="120"> 11-10-2003 </TD>
<TD id='colid9002' width="130" align=right> 000162067753 </TD>
<TD id='colid9003' width="110" align=right> Y1710718 </TD>
<TD id='colid9004' width="130" align=right> 29 </TD>
<TD id='colid9005' width="120"> English </TD>
<TD id='colid9006' width="100"> &nbsp;</TD>
<TD id='colid9007' width="0" style='display:none;'>9</TD></TR>
<TR id='Row9' class=RowElementGray>
<TD id='colid9001' width="120"> 11-10-2003 </TD>
<TD id='colid9002' width="130" align=right> 000162067753 </TD>
<TD id='colid9003' width="110" align=right> Y1710718 </TD>
<TD id='colid9004' width="130" align=right> 29 </TD>
<TD id='colid9005' width="120"> English </TD>
<TD id='colid9006' width="100"> &nbsp;</TD>
<TD id='colid9007' width="0" style='display:none;'>9</TD></TR>
<TR id='Row9' class=RowElementWhite>
<TD id='colid9001' width="120"> 11-10-2003 </TD>
<TD id='colid9002' width="130" align=right> 000162067753 </TD>
<TD id='colid9003' width="110" align=right> Y1710718 </TD>
<TD id='colid9004' width="130" align=right> 29 </TD>
<TD id='colid9005' width="120"> English </TD>
<TD id='colid9006' width="100"> &nbsp;</TD>
<TD id='colid9007' width="0" style='display:none;'>9</TD></TR>
<TR id='Row9' class=RowElementGray>
<TD id='colid9001' width="120"> 11-10-2003 </TD>
<TD id='colid9002' width="130" align=right> 000162067753 </TD>
<TD id='colid9003' width="110" align=right> Y1710718 </TD>
<TD id='colid9004' width="130" align=right> 29 </TD>
<TD id='colid9005' width="120"> English </TD>
<TD id='colid9006' width="100"> &nbsp;</TD>
<TD id='colid9007' width="0" style='display:none;'>9</TD></TR>
<TR id='Row9' class=RowElementWhite>
<TD id='colid9001' width="120"> 11-10-2003 </TD>
<TD id='colid9002' width="130" align=right> 000162067753 </TD>
<TD id='colid9003' width="110" align=right> Y1710718 </TD>
<TD id='colid9004' width="130" align=right> 29 </TD>
<TD id='colid9005' width="120"> English </TD>
<TD id='colid9006' width="100"> &nbsp;</TD>
<TD id='colid9007' width="0" style='display:none;'>9</TD></TR>
<TR id='Row9' class=RowElementGray>
<TD id='colid9001' width="120"> 11-10-2003 </TD>
<TD id='colid9002' width="130" align=right> 000162067753 </TD>
<TD id='colid9003' width="110" align=right> Y1710718 </TD>
<TD id='colid9004' width="130" align=right> 29 </TD>
<TD id='colid9005' width="120"> English </TD>
<TD id='colid9006' width="100"> &nbsp;</TD>
<TD id='colid9007' width="0" style='display:none;'>9</TD></TR>
</TABLE>
</div>
</body>
</HTML>
himanshu patel
Ranch Hand

Joined: Feb 03, 2003
Posts: 205
Check the syntax.
Correct syntax is,
document.getElementById("test").width = document.getElementById("div1").clientWidth;
OR
document.getElementById("test").width = 694;
You can also use this method.
document.getElementById("test").setAttribute('width',694);


If you want to become a rich, do not work for others but make others to work for you.
Eric Pascarello
author
Rancher

Joined: Nov 08, 2001
Posts: 15376
    
    6
You can look at this: http://www.coderanch.com/t/113462/HTML-JavaScript/frames-scrolling-spreadsheet
The top frame I have code in it to resize the columns, not sure if you will be able to figure out that coding since I have not even looked at the code in ages. It uses frames and I am trying to avoid them at all costs.
My current project I am working on is a "table" that has column resizing, scrolling, body, static header, column ordering. The entire thing is basically divs with no table, and all you information would have to be placed in a 2D array. I probably have another week of work to put into it since I just started it yesterday.
Yuriy Fuksenko
Ranch Hand

Joined: Feb 02, 2001
Posts: 413
Hi,
you can look at http://www.devsoftware.com/dhtmlTest/tableIE.html
Code is kind of old (about a year I think) but it has column swaping, resizing, scrolling, header.
I have not looked at it for a while, but it used to work in IE5.5+ and NS6+
Vladimir A.
Greenhorn

Joined: Feb 14, 2004
Posts: 1
Hello, try to use this scirpt:
http://www.valdersoft.com/flexible_table.php
This is Flexible Table script that allow to Resize Columnts using "Drag to Resize" method, using templaets etc.
I very recommend it!
 
I agree. Here's the link: http://aspose.com/file-tools
 
subject: Resizing table width upon page load
 
Similar Threads
resizing table width
Can not Populate the form on combo box change
JSP Action Buttons freez after returning from ajax call
iterate problem in struts2
HTML does not print properly - table width exceeding 100%?