Win a copy of TDD for a Shopping Website LiveProject this week in the Testing forum!
  • Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Paul Clapham
  • Ron McLeod
  • Jeanne Boyarsky
  • Tim Cooke
Sheriffs:
  • Liutauras Vilda
  • paul wheaton
  • Henry Wong
Saloon Keepers:
  • Tim Moores
  • Tim Holloway
  • Stephan van Hulst
  • Carey Brown
  • Frits Walraven
Bartenders:
  • Piet Souris
  • Himai Minh

Resizing table width upon page load

 
Greenhorn
Posts: 20
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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>
 
Ranch Hand
Posts: 205
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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);
 
author
Posts: 15385
6
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
You can look at this: https://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.
 
Ranch Hand
Posts: 413
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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+
 
Greenhorn
Posts: 1
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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!
 
Why am I so drawn to cherry pie? I can't seem to stop. Save me tiny ad!
Free, earth friendly heat - from the CodeRanch trailboss
https://www.kickstarter.com/projects/paulwheaton/free-heat
reply
    Bookmark Topic Watch Topic
  • New Topic