Meaningless Drivel is fun!*
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
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
JSP Action Buttons freez after returning from ajax call
HTML does not print properly - table width exceeding 100%?
resizing table width
Can not Populate the form on combo box change
iterate problem in struts2