fixing column width in a dynamic table

**Tony** · Dec 13 '05, 06:25 PM

Re: fixing column width in a dynamic table

chimalus@gmail. com wrote:[color=blue]
> I am using a table with no column widths specified, letting the
> table layout manager do its thing for figuring out the column
> widths, and this works just fine.
>
> Now I want to make the table dynamic. I have added a filtering
> mechanism (in javascript) that can be used to hide unneeded
> rows. However, each time I hide or show rows, the column sizes
> change, and this doesn't look good.
>
> Is there a way that I can preserve the column widths as originally
> displayed? (I don't want to specify column widths at design time.)
> I originally asked this question in a javascript group and they sent
> me here; if there's a better place to post this, please let me know.[/color]

Odd they would refer you elsewhere, since the answer lies in
javascript. Bascially, when you first load the page, you would want to
retrieve the actual widths of the columns, then set them using
..style.height

There may still be some resizing, but that would at least be a start.

**Gérard Talbot** · Dec 14 '05, 01:35 AM

Re: fixing column width in a dynamic table

chimalus@gmail. com a écrit :[color=blue]
> I am using a table with no column widths specified, letting the
> table layout manager do its thing for figuring out the column
> widths, and this works just fine.
>
> Now I want to make the table dynamic. I have added a filtering
> mechanism (in javascript) that can be used to hide unneeded
> rows. However, each time I hide or show rows, the column sizes
> change,[/color]

This is to be expected. A column is as wide as its widest contained cell.

[color=blue]
> and this doesn't look good.[/color]

The premisse still holds. As you remove a table row, the width of
columns should remain as wide as needed, to render the widest of its
contained cell. So, I don't understand why you say it does not look good.
[color=blue]
>
> Is there a way that I can preserve the column widths as originally
> displayed?[/color]

Yes but why would you want to do that anyway?

Gérard
--
remove blah to email me

**chimalus@gmail.com** · Dec 14 '05, 02:45 AM

Re: fixing column width in a dynamic table

Gérard Talbot wrote:[color=blue]
>
> The premisse still holds. As you remove a table row, the width of
> columns should remain as wide as needed, to render the widest of its
> contained cell. So, I don't understand why you say it does not look good.[/color]

It's an aesthetic issue, I suppose there's room for disagreement.
To me, it looks like the columns are jumping around and so I've got
to "reorient" myself. The filtering is done incrementally (on
each keystroke) so typing quickly results in a lot of shuffling.
I want the visual appearance to emphasis the idea that filtering
has just removed rows from the table (and no more).
[color=blue]
>[color=green]
> > Is there a way that I can preserve the column widths as originally
> > displayed?[/color]
>
> Yes but why would you want to do that anyway?[/color]

So what solution would you use?

-- jeff

**Jim Moe** · Dec 14 '05, 06:15 AM

Re: fixing column width in a dynamic table

chimalus@gmail. com wrote:[color=blue]
>
> Is there a way that I can preserve the column widths as originally
> displayed? (I don't want to specify column widths at design time.)
>[/color]
There is no width "as originally displayed." Without an explicit width
specification, the column width adjusts to the widest cell requirement.
A way to reduce width changes is to set the table width to 100% and
specify each column width. You can use <colgroup> and <col> to do so; or
you can use CSS. In either case the widths may still change since that is
the nature of table-cell. You may prevent that by using "overflow:hidde n"
for all <td>s but then some of the data may be clipped from view.

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

**Tony** · Dec 14 '05, 06:05 PM

Re: fixing column width in a dynamic table

Jim Moe wrote:[color=blue]
> chimalus@gmail. com wrote:
> There is no width "as originally displayed." Without an explicit width
> specification, the column width adjusts to the widest cell requirement.
> A way to reduce width changes is to set the table width to 100% and
> specify each column width. You can use <colgroup> and <col> to do so; or
> you can use CSS. In either case the widths may still change since that is
> the nature of table-cell. You may prevent that by using "overflow:hidde n"
> for all <td>s but then some of the data may be clipped from view.[/color]

overflow: hidden does not work on table cells[1]. About the best you
could do is

<td style="height:` xx;width:xx"><d iv
style="height:1 00%;width:100%; overflow:hidden ;"></div></td>

[1] - Just to be sure, I tested it with the following (in IE, FF, and
Opera):

<table>
<tr>
<td style="width:10 0px;height:100p x;overflow:hidd en;">
overflow hidden overflow hidden overflow hidden overflow hidden
overflow hidden overflow hidden overflow hidden overflow hidden
overflow hidden overflow hidden overflow hidden overflow hidden
overflow hidden overflow hidden overflow hidden overflow hidden
overflow hidden overflow hidden overflow hidden overflow hidden
overflow hidden overflow hidden overflow hidden overflow hidden
</td>
<td style="width:10 0px;height:100p x;">Not hidden</td>
</tr>

</table>

**Gérard Talbot** · Dec 14 '05, 07:45 PM

Re: fixing column width in a dynamic table

chimalus@gmail. com wrote :[color=blue]
> Gérard Talbot wrote:
>[color=green]
>>The premisse still holds. As you remove a table row, the width of
>>columns should remain as wide as needed, to render the widest of its
>>contained cell. So, I don't understand why you say it does not look good.[/color]
>
>
> It's an aesthetic issue, I suppose there's room for disagreement.
> To me, it looks like the columns are jumping around and so I've got
> to "reorient" myself. The filtering is done incrementally (on
> each keystroke) so typing quickly results in a lot of shuffling.[/color]

I bet you do not use table to render tabular data on top of all this.
[color=blue]
> I want the visual appearance to emphasis the idea that filtering
> has just removed rows from the table (and no more).
>
>[color=green][color=darkred]
>>>Is there a way that I can preserve the column widths as originally
>>>displayed?[/color]
>>
>>Yes but why would you want to do that anyway?[/color]
>
>
> So what solution would you use?
>
> -- jeff
>[/color]

I've run some tests and the *_aesthetic_* issue appears in MSIE 6 but
not in Firefox 1.5, not in Seamonkey 1.5a and probably not in other
highly web-standards-compliant browsers.

Gérard
--
remove blah to email me

**Jim Moe** · Dec 14 '05, 09:05 PM

Re: fixing column width in a dynamic table

Tony wrote:[color=blue]
>
> overflow: hidden does not work on table cells[1].
>[/color]
Ah. Quite so.
Doing this works as well:
td { width: xx%; }
td p { overflow: hidden; }
Then place the data in <td><p> data </p></td>.
[color=blue]
> <td style="height:` xx;width:xx"><d iv
> style="height:1 00%;width:100%; overflow:hidden ;"></div></td>
>[/color]

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

**Jim Moe** · Dec 15 '05, 07:25 AM

Re: fixing column width in a dynamic table

Jim Moe wrote:[color=blue]
> Doing this works as well:
> td { width: xx%; }
> td p { overflow: hidden; }
> Then place the data in <td><p> data </p></td>.
>[/color]
Arrggh! IE, of course, needs some bludgeoning:
td p { overflow: hidden; width: 10em; }

The actual width does not matter (whatever you want it to be) as long
as it is *not* expressed as a percentage (%)! px, pt, em, ex, in, cm and
mm are all okay.
For pre-IE6, the same applies to the height, or leave it out altogether.

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

**chimalus@gmail.com** · Dec 16 '05, 01:20 AM

Re: fixing column width in a dynamic table

I don't want to specify column widths in the stylesheet since they're
not
known at design time. I've tried setting the widths dynamically at
runtime
but the table manager seems to ignore them and just changes them to
whatever it wants. The "overflow:hidde n" shouldn't be necessary
because
the table columns are already wide enough to accomodate all the text.

Still looking for a solution here. Thanks...

-- jeff

**rocketmonkeys@gmail.com** · Dec 16 '05, 04:20 AM

Re: fixing column width in a dynamic table

One thing that may be getting you is the table behavior when the table
is bigger (or smaller) than intended. First off, say you have:
<table width="100%">
<tr>
<td>something </td>
<td>something something</td>
<td>something something something</td>
</tr>
</table>

This means the table will fill the screen, and the cells will be at:
17%, 33%, and 50% respectively. It's proportional; the second cell is
2x the first, the third cell is 3x the first, so it spaces them all
proportional to the content.
Cell 1: 1 unit / 6 units total (17%)
Cell 1: 2 unit / 6 units total (33%)
etc.

If you specify widths, the table uses that instead of the contents
width. IE:
<td width="100">som ething something something something something
something</td>
<td width="100">som ething</td>
<td width="200"></td>

Cell1: 100/400 = 25%
Cell2: 100/400 = 25%
Cell2: 200/400 = 25%

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:

<table width="100%" border="1">
<tr>
<td id="cell1">some thing</td>
<td id="cell2">some thing something</td>
<td id="cell3">some thing something something</td>
</tr>
</table>

<script type="text/javascript">

var cell1 = document.getEle mentById("cell1 ");
var cell2 = document.getEle mentById("cell2 ");
var cell3 = document.getEle mentById("cell3 ");

// Comment out these three lines to see "jumping around"
cell1.style.wid th = cell1.offsetWid th + "px";
cell2.style.wid th = cell2.offsetWid th + "px";
cell3.style.wid th = cell3.offsetWid th + "px";

alert("About to resize content...");

// Now the contents will flow onto new lines, and not change the
column width
cell1.innerHTML = "something something something something something
something something something something something";

</script>

I don't think you want to do overflow:hidden and *hide* content. You
just want to keep column widths the same so they don't "jump around".
What do you think Jeff? Others?

PS. Apologies for "innerHTML" , getting lazy.

**Jim Moe** · Dec 16 '05, 08:05 AM

Re: fixing column width in a dynamic table

chimalus@gmail. com wrote:[color=blue]
> I don't want to specify column widths in the stylesheet since they're
> not known at design time.
> The "overflow:hidde n" shouldn't be necessary
> because the table columns are already wide enough to
> accomodate all the text.
>[/color]
- The widest width is not known.
- The widest width is known since the text fits in it.
Which is it?

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

jd · Dec 16 '05, 05:45 PM

Re: fixing column width in a dynamic table

rocketmonkeys@g mail.com wrote:[color=blue]
> 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:[/color]

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

jd · Dec 16 '05, 05:45 PM

Re: fixing column width in a dynamic table

Jim Moe wrote:[color=blue]
> chimalus@gmail. com wrote:[color=green]
> > I don't want to specify column widths in the stylesheet since they're
> > not known at design time.
> > The "overflow:hidde n" shouldn't be necessary
> > because the table columns are already wide enough to
> > accomodate all the text.
> >[/color]
> - The widest width is not known.
> - The widest width is known since the text fits in it.
> Which is it?[/color]

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

**rocketmonkeys@gmail.com** · Dec 16 '05, 08:35 PM

Re: fixing column width in a dynamic table

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.

-james