A rowspan cell grows - how to get only 1 of the adjacent ones togrow?

[Jarkko Kuoppamäki]

I have a table consisting of a rowspan=3 cell and three normal size
cells on top of each other, on the left side of the first one. If the
tall one grows (due to its content) vertically let's say double, the
height of other 3 cells double, too. I would need two of those to stay
as they were and the last one to grow 4 times its height. How do I
accomplish this?

I've tried the height parameter of the cell (<td>) or the css defition.
However, this (I believe) defines only the minimum height that will
expand if the contents so require.

The doctype is 4.01 Transitional, but I guess it could be changed if
needed. A solution compatible with all browsers would be ideal, most
browsers sufficient and if nothing else fails, I'd be willing to accept
even a IE-only compatible one.

To illustrate:

<table border=1>
<tr>
<td>cell2</td>
<td rowspan=3><div style="height:300px">cell1</div></td>
</tr>
<td>cell3</td>
</tr>
<td>cell4</td>
</tr>
</table>

thanks in advance,

--Jarkko

 

[Jukka K. Korpela]

Scripsit Jarkko Kuoppamäki:

The doctype is 4.01 Transitional,
Why?

</tr>
<td>cell3</td>

This isn't valid under any of the HTML doctypes.

Posting a real URL for the real page is often a good start.

 

[Jarkko Kuoppamäki]

Scripsit Jarkko Kuoppamäki:


Why?

This was given with the task, which is to design 'cell1' so that it has
a certain content. This resulted in cells 2-4 growing, which wasn't what
the task assigner had in mind. Since cells 2-4 were given as well, I
would stay out of modifying them (or the doctype) unless it is really
necessary. In a sense, they become my responsibility if I need to edit
them. In theory anyway.

This isn't valid under any of the HTML doctypes.

Posting a real URL for the real page is often a good start.

The real URL isn't accessible, but I will see if I could get a copy
published. Meanwhile, let me add the missing <tr>'s (sorry):

<table border=1>
<tr>
<td>cell2</td>
<td rowspan=3><div style="height:300px">cell1</div></td>
</tr>
<tr>
<td>cell3</td>
</tr>
<tr>
<td>cell4</td>
</tr>
</table>

--Jarkko

 

[dorayme]

Jarkko Kuoppamäki

I have a table consisting of a rowspan=3 cell and three normal size
cells on top of each other, on the left side of the first one. If the
tall one grows (due to its content) vertically let's say double, the
height of other 3 cells double, too. I would need two of those to stay
as they were and the last one to grow 4 times its height. How do I
accomplish this?

I've tried the height parameter of the cell (<td>) or the css defition.
However, this (I believe) defines only the minimum height that will
expand if the contents so require.

The doctype is 4.01 Transitional, but I guess it could be changed if
needed. A solution compatible with all browsers would be ideal, most
browsers sufficient and if nothing else fails, I'd be willing to accept
even a IE-only compatible one.

To illustrate:

<table border=1>
<tr>
<td>cell2</td>
<td rowspan=3><div style="height:300px">cell1</div></td>
</tr>

<td>cell3</td>
</tr>
<td>cell4</td>
</tr>
</table>

Safari 2.0.4 gets you what you want with the above (as long as
cell2 and cell3 have the same "amount" of content). But you might
say more about what you are really doing before anyone here will
try hard to get you as close to what you might be happy with
cross-browser-wise.

 

[Jarkko Kuoppamäki]

Safari 2.0.4 gets you what you want with the above (as long as
cell2 and cell3 have the same "amount" of content). But you might
say more about what you are really doing before anyone here will
try hard to get you as close to what you might be happy with
cross-browser-wise.

I'll see if I can get a copy of the original page available. Meanwhile:
cell1 is dynamic content, and depending on the end user's choices,
displaying it may take space a little (no problem) or more.

There used to be two additional cells on top of cell1, which worked
fine: if cell1 grew, cell4 (on the bottom) next to it grew. However, the
two additional cells were taking space and I was asked to remove them. I
did and now I'm asked why cell2 and cell3 are stretched vertically.

It is starting to look like I need to redesign the left side of the
table, even though they were given as a layout that is used everywhere
else on the site in question.

--Jarkko

 

[dorayme]

Jarkko Kuoppamäki

I'll see if I can get a copy of the original page available. Meanwhile:
cell1 is dynamic content, and depending on the end user's choices,
displaying it may take space a little (no problem) or more.

There used to be two additional cells on top of cell1, which worked
fine: if cell1 grew, cell4 (on the bottom) next to it grew. However, the
two additional cells were taking space and I was asked to remove them. I
did and now I'm asked why cell2 and cell3 are stretched vertically.

It is starting to look like I need to redesign the left side of the
table, even though they were given as a layout that is used everywhere
else on the site in question.

--Jarkko

Are you noting what I said about browsers? It might be pertinent
at least to mention what browsers you are testing in. It is an
interesting matter how different browsers calculate things
differently.

 

[richard]

I have a table consisting of a rowspan=3 cell and three normal size
cells on top of each other, on the left side of the first one. If the
tall one grows (due to its content) vertically let's say double, the
height of other 3 cells double, too. I would need two of those to stay
as they were and the last one to grow 4 times its height. How do I
accomplish this?

I've tried the height parameter of the cell (<td>) or the css defition.
However, this (I believe) defines only the minimum height that will
expand if the contents so require.

The doctype is 4.01 Transitional, but I guess it could be changed if
needed. A solution compatible with all browsers would be ideal, most
browsers sufficient and if nothing else fails, I'd be willing to accept
even a IE-only compatible one.

To illustrate:

<table border=1>
<tr>
<td>cell2</td>
<td rowspan=3><div style="height:300px">cell1</div></td>
</tr>
<td>cell3</td>
</tr>
<td>cell4</td>
</tr>
</table>

thanks in advance,

--Jarkko

One solution might be to use two tables side by side.
That way, the adjacent cell won't react to what the growing cell does.
Unless your table is much more complicated than shown, try using pure
divisions instead of a table format.

 

[Jonathan N. Little]

One solution might be to use two tables side by side.
That way, the adjacent cell won't react to what the growing cell does.
Unless your table is much more complicated than shown, try using pure
divisions instead of a table format.

Or not use a table at all since it is most likely not tabular data.

The ol' "Why is it so hard to drive nails with this screwdriver" question.

 

[Ben C]

I have a table consisting of a rowspan=3 cell and three normal size
cells on top of each other, on the left side of the first one. If the
tall one grows (due to its content) vertically let's say double, the
height of other 3 cells double, too. I would need two of those to stay
as they were and the last one to grow 4 times its height. How do I
accomplish this?

You can set explicit heights on the cells you want to stay those
heights-- so if you can set the two you want to stay as they were to
some actual height then that might be an option (but see below).

But if they're all auto height, the browser will distribute the extra
space required by the spanning cell to the other ones in some undefined
but usually vaguely even-handed fashion.

You can't control it more precisely than that. There is nothing in the
specifications to say exactly how this should be done.

I've tried the height parameter of the cell (<td>) or the css defition.
However, this (I believe) defines only the minimum height that will
expand if the contents so require.

You can usually "force" the exact height like this:

<td style="height: 200px">
<div style="height: 200px; overflow: hidden">
contents
</div>
</td>

You don't have to use overflow: hidden of course-- overflow: scroll
might be a better choice.

 

[richard]

Or not use a table at all since it is most likely not tabular data.

The ol' "Why is it so hard to drive nails with this screwdriver" question.

How would you know unless you saw the data presented?
He was asking a legitimate question on the usage of tables. Not what
was going into it.
There are possibilities of having tabular data expand in one cell but
not others.

 

[richard]

You can set explicit heights on the cells you want to stay those
heights-- so if you can set the two you want to stay as they were to
some actual height then that might be an option (but see below).

But if they're all auto height, the browser will distribute the extra
space required by the spanning cell to the other ones in some undefined
but usually vaguely even-handed fashion.

You can't control it more precisely than that. There is nothing in the
specifications to say exactly how this should be done.


You can usually "force" the exact height like this:

<td style="height: 200px">
<div style="height: 200px; overflow: hidden">
contents
</div>
</td>

You don't have to use overflow: hidden of course-- overflow: scroll
might be a better choice.

I've seen a few examples of overflow:scroll, where the window created
was so small, that scrolling with the bar was almost impossible. One
must consider just how much data is going to be presented in that
window if scrolling is used.

 

[Jonathan N. Little]

On Sun, 13 Jan 2008 10:01:02 -0500, "Jonathan N. Little"


How would you know unless you saw the data presented?
He was asking a legitimate question on the usage of tables. Not what
was going into it.
There are possibilities of having tabular data expand in one cell but
not others.

If it were tabular data then he would not need to set the height of a
cell, the "natural" behavior of a table to expand and contract to fit
the data would suffice. Tables work that way so that the data may vary
in size but the table preserves the grid orientation that aligns rows
and columns with the associated headings.