fixing column width in a dynamic table

[rocketmonkeys@gmail.com]

Re: fixing column width in a dynamic table

I think it's like this:
-Display the table with no widths specified at all (let the layout
engine decide cell widths/heights.
-Now keep those columns the same width even after dynamically modifying
content.

For this scheme, no HTML or CSS will work. There are hacks, like
specifying all the same width, or specifying overflow:hidden (which I
think would cause unwanted side effects). But I think javascript is
the only way to do exactly what Jeff wants.

Jeff, accurate?

[jd]

Re: fixing column width in a dynamic table


rocketmonkeys@g mail.com wrote:[color=blue]
> I think it's like this:
> -Display the table with no widths specified at all (let the layout
> engine decide cell widths/heights.
> -Now keep those columns the same width even after dynamically modifying
> content.
>
> For this scheme, no HTML or CSS will work. There are hacks, like
> specifying all the same width, or specifying overflow:hidden (which I
> think would cause unwanted side effects). But I think javascript is
> the only way to do exactly what Jeff wants.
>
> Jeff, accurate?[/color]

Yes, that's accurate.

[jd]

Re: fixing column width in a dynamic table


rocketmonkeys@g mail.com wrote:[color=blue]
> You tried my code? We're going to have to see your page in its
> entirety. Probably best to send it via email, rocketmonkeys@g mail.com,
> post here when you've sent it. The code I posted works for me in IE 6
> XP SP2, and Firefox 1.5. It could be something else on the page is
> interfering.[/color]

Well, I didn't actually try your code, but I tried your technique.
As you've requested, I've emailed you a page. Thanks for taking the
time
to look at this.

-- jeff

[jd]

Re: fixing column width in a dynamic table

Here's the solution I came up with:

Add an extra row to the table with the same number of
columns (cells) as the rest of the table. For each cell
in the row, set its style.paddingLe ft to the style.offsetWid th
of an an existing cell in the same column. Set the
style.visibilit y of the new row to "hidden".

There are one or two tricks here (depending on how
you count ;-)

- After the table is rendered for the first time, use the
width of each column as it was rendered to determine
the desired size of that column.

- To fix the size of a cell, set its padding, not its
width. The table layout manager is apparently allowed
to play around with widths (treat them as a hint rather
than a requirement), but setting the padding creates a
minimum size that it can't mess with. I tried many
variations on setting cell/column width only to find that
none of them seemed to work. Using padding is similar
to the common suggestion of using an invisible image,
but it allows the width to be determined dynamically and
also eliminates the overhead of those extra images.

-- jeff