By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,458 Members | 1,201 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,458 IT Pros & Developers. It's quick & easy.

fixing column width in a dynamic table

P: n/a
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

Dec 13 '05 #1
Share this Question
Share on Google+
18 Replies


P: n/a
ch******@gmail.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.

Dec 13 '05 #2

P: n/a
ch******@gmail.com a écrit :
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,
This is to be expected. A column is as wide as its widest contained cell.

and this doesn't look good.
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.

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


Yes but why would you want to do that anyway?

Gérard
--
remove blah to email me
Dec 14 '05 #3

P: n/a
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

Dec 14 '05 #4

P: n/a
ch******@gmail.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)
Dec 14 '05 #5

P: n/a
Jim Moe wrote:
ch******@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: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>

Dec 14 '05 #6

P: n/a
ch******@gmail.com wrote :
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 bet you do not use table to render tabular data on top of all this.
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


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
Dec 14 '05 #7

P: n/a
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)
Dec 14 '05 #8

P: n/a
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)
Dec 15 '05 #9

P: n/a
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

Dec 16 '05 #10

P: n/a
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.

Dec 16 '05 #11

P: n/a
ch******@gmail.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)
Dec 16 '05 #12

P: n/a
jd
ro***********@gmail.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

Dec 16 '05 #13

P: n/a
jd

Jim Moe wrote:
ch******@gmail.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

Dec 16 '05 #14

P: n/a
You tried my code? We're going to have to see your page in its
entirety. Probably best to send it via email, ro***********@gmail.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

Dec 16 '05 #15

P: n/a
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?

Dec 16 '05 #16

P: n/a
jd

ro***********@gmail.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.

Dec 16 '05 #17

P: n/a
jd

ro***********@gmail.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, ro***********@gmail.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

Dec 17 '05 #18

P: n/a
jd
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

Dec 20 '05 #19

This discussion thread is closed

Replies have been disabled for this discussion.