fixing column width in a dynamic table

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.

Thanks...

-- jeff

chimalus (AT) gmail (DOT) com wrote:

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.

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 wrote:

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.

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).

Is there a way that I can preserve the column widths as originally
displayed?

Yes but why would you want to do that anyway?

So what solution would you use?

-- jeff

chimalus (AT) gmail (DOT) com wrote:

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.)

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:hidden"
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)

Jim Moe wrote:

chimalus (AT) gmail (DOT) 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:hidden"
for all <td>s but then some of the data may be clipped from view.

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

<td style="height:`xx;width:xx"><div
style="height:100%;width:100%;overflow:hidden;"><! -- content here
--></div></td>


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

<table>
<tr>
<td style="width:100px;height:100px;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 overflow hidden
</td>
<td style="width:100px;height:100px;">Not hidden</td>
</tr>

</table>

Tony wrote:

overflow: hidden does not work on table cells[1].

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>.

td style="height:`xx;width:xx"><div
style="height:100%;width:100%;overflow:hidden;"><! -- content here
--></div></td

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

Jim Moe wrote:

Doing this works as well:
td { width: xx%; }
td p { overflow: hidden; }
Then place the data in <td><p> data </p></td>.

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)

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:hidden" 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

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">something something something something something
something</td>
<td width="100">something</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">something</td>
<td id="cell2">something something</td>
<td id="cell3">something something something</td>
</tr>
</table>

<script type="text/javascript">

var cell1 = document.getElementById("cell1");
var cell2 = document.getElementById("cell2");
var cell3 = document.getElementById("cell3");

// Comment out these three lines to see "jumping around"
cell1.style.width = cell1.offsetWidth + "px";
cell2.style.width = cell2.offsetWidth + "px";
cell3.style.width = cell3.offsetWidth + "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.

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?

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