aspose file tools*
The moose likes HTML, CSS and JavaScript and the fly likes resizing table width Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Reply locked New topic
Author

resizing table width

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 when i do it using two tables.one for header and the other for the body within a division. The columns of the two tables are offset if teh scrollbar appears.
Hence, I tried to align the tables dynamically on page load using the script in this code but somehow it doest resize the header table. Just wondering if I am doing anything wromg.
Here is the code. I really appreciate if somecan can assist me finding out what is wrong with the code. Please help.
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>
Eric Pascarello
author
Rancher

Joined: Nov 08, 2001
Posts: 15376
    
    6
Closing this topic, look at the other one.
 
I agree. Here's the link: http://aspose.com/file-tools
 
subject: resizing table width
 
Similar Threads
iterate problem in struts2
Resizing table width upon page load
JSP Action Buttons freez after returning from ajax call
Can not Populate the form on combo box change
HTML does not print properly - table width exceeding 100%?