Resizing parts of a table... ?

nexius · May 24, 2004

Hi

The site I'm working on right now includes a php script that builds a table so that it looks like a tree of links. The problem is that there is no way to tell what the final width of the table will be... And since I need to specify exact widths for each column (otherwise it looks odd), I'm turning to javascript.

My idea is that once the page is loaded, I'll include some javascript that will resize the <td>'s that don't have any set width yet.

I've been experimenting with changing the widths of tables dynamically but haven't got anywhere... Suggestions?

THANKS

Note: Here's the page I'm talking about:

http://www.3delement.com/newsite/index.php

It looks great in netscape/mozilla but some cells end up too big in IE. Any help appreciated.

Spiny · May 25, 2004

Use an array of <td>s by giving them all the same ID. This will make it much easier to isolate the one yuou want. It also stops the need to have a counter and incrementor in your php.
<td id="tableCell"> </td>
The above td will be tableCell[0]
<td id="tableCell"> </td>
The above td will be tableCell[1]

And so on and so forth.
Hope this helps,
Spiny

nexius · May 25, 2004

Thanks Spiny, that helps

Now I need to figure out how to get the width of each table... I tried giving the table an ID and writing:

document.getElementById(tableID).style.width

But this doesn't return anything... Unless I set it equal to something first.

Is there another way to find the width of a table?

nexius · May 25, 2004

Hey

I think I have a pretty good idea of how to do it now but I can't get your idea to work...

Here's a test page I wrote that doesn't work:

Code:

<html>
<head>
<title>Untitled Document</title>

<script>

function changeDims(elemName, w, h)
{
  document.getElementById(elemName).style.width = w;
  document.getElementById(elemName).style.height = h;
}
</script>

</head>

<body>

<center>

<table id="tbl" border=1 cellpadding=1>
<tr>

<td id="cell">blha</td>
<td id="cell">blha</td>

<td id="cell">

<table id="tbl" border=1 cellpadding=1>
<tr>

<td>blha</td>
<td>blha</td>
<td>blha</td>

</tr>
</table>

</td>

</tr>
</table>

<br>

<br><br>
<a href="#" onclick="changeDims('cell[1]', 100, 100)">change size</a>

</center>

</body>
</html>

nexius · May 25, 2004

The page does work though when I just call changeDims with 'cell' instead of 'cell[1]'

btw I only need this to work with IE...

nexius · May 25, 2004

YAY

I figured it out
Nevermind

joelmac · Aug 5, 2004

How did you fix it??? I'm having the same problem.

________________________
JoelMac

joelmac · Aug 5, 2004

I can get the width if I set the width attriblute in the TD tag, but not if I don't set it. I don't know what the widths are going to be and have two tables that have to be the same widths

________________________
JoelMac

nexius · Aug 13, 2004

Hey joelmac, have you got it yet?

Sorry I really should have described my solution... I know how frustrating that can be when you finally find a thread with the same problem and all the guys says is : "I fixed it! Woohoo!"

Anyway
What I did was I included a blank image of zero height in the first row of the table and had that row span across the entire table. That way, I can get the width of the table by looking up the width of the image.

You should have looked up the URL I wrote in my first post, the fix was right there

Let me know if you need more explanation

nexius · Aug 13, 2004

Here's some code if you're too lazy to look it up

Code:

function fixTables()
{
	var tableLength = document.images['imgSpan'].width;

	for (var i=0; i< 9; i++)
	{
		var elemName = 'cell' + i;

  		document.getElementById(elemName).style.width = tableLength - lengths[i];
	}
}

In my case, there is one cell that I can't predict the width for, so I just store the sum of all the other cell widths in lengths and subtract from the total width to get the width for the one cell

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Resizing parts of a table... ?

nexius

Programmer

Spiny

Programmer

nexius

Programmer

nexius

Programmer

nexius

Programmer

nexius

Programmer

joelmac

Programmer

joelmac

Programmer

nexius

Programmer

nexius

Programmer

Similar threads

Part and Inventory Search

Sponsor