fixing column width in a dynamic table

rocketmonkeys (AT) gmail (DOT) com wrote:

The contents will just wrap onto more rows without changing the column
size, assuming they can be wrapped (not like a big image that will
force the width).

What you could do in javascript, as someone mentioned, is to first load
the table with the default contents and record the widths, then set
them explicitly and they'll stay constant:

I tried this and it doesn't work for me, not sure why.
I tested in both Firefox and in IE and both still change the column
widths even after I have explicitly set them to specific values (in
pixels).

-- jeff

Jim Moe wrote:

chimalus (AT) gmail (DOT) com wrote:
I don't want to specify column widths in the stylesheet since they're
not known at design time.
The "overflow:hidden" shouldn't be necessary
because the table columns are already wide enough to
accomodate all the text.

- The widest width is not known.
- The widest width is known since the text fits in it.
Which is it?

At design time, the widest width is not known.
When the page is displayed, the widest width is known since the text
fits in it.

(have I answered the question?)

-- jeff

You tried my code? We're going to have to see your page in its
entirety. Probably best to send it via email, rocketmonkeys (AT) gmail (DOT) 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.

-james

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?

rocketmonkeys (AT) gmail (DOT) com wrote:

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?

Yes, that's accurate.

rocketmonkeys (AT) gmail (DOT) com wrote:

You tried my code? We're going to have to see your page in its
entirety. Probably best to send it via email, rocketmonkeys (AT) gmail (DOT) 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.

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

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.paddingLeft to the style.offsetWidth
of an an existing cell in the same column. Set the
style.visibility 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