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

Discussion in 'HTML' started by Jarkko Kuoppamäki, Jan 12, 2008.

  1. 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
     
    Jarkko Kuoppamäki, Jan 12, 2008
    #1
    1. Advertising

  2. Re: A rowspan cell grows - how to get only 1 of the adjacent ones to grow?

    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.

    --
    Jukka K. Korpela ("Yucca")
    http://www.cs.tut.fi/~jkorpela/
     
    Jukka K. Korpela, Jan 12, 2008
    #2
    1. Advertising

  3. Re: A rowspan cell grows - how to get only 1 of the adjacent onesto grow?

    Jukka K. Korpela wrote:
    > Scripsit Jarkko Kuoppamäki:
    >
    >> The doctype is 4.01 Transitional,

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

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


    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
     
    Jarkko Kuoppamäki, Jan 12, 2008
    #3
  4. Jarkko Kuoppamäki

    dorayme Guest

    Re: A rowspan cell grows - how to get only 1 of the adjacent ones to grow?

    In article <J%7ij.280098$>,
    Jarkko Kuoppamäki
    <> wrote:

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

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

    --
    dorayme
     
    dorayme, Jan 12, 2008
    #4
  5. Re: A rowspan cell grows - how to get only 1 of the adjacent onesto grow?

    dorayme wrote:
    > In article <J%7ij.280098$>,
    > 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
     
    Jarkko Kuoppamäki, Jan 12, 2008
    #5
  6. Jarkko Kuoppamäki

    dorayme Guest

    Re: A rowspan cell grows - how to get only 1 of the adjacent ones to grow?

    In article <3Daij.280200$>,
    Jarkko Kuoppamäki
    <> wrote:

    > dorayme wrote:
    > > In article <J%7ij.280098$>,
    > > 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


    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.

    --
    dorayme
     
    dorayme, Jan 12, 2008
    #6
  7. Jarkko Kuoppamäki

    richard Guest

    Re: A rowspan cell grows - how to get only 1 of the adjacent ones to grow?

    On Sat, 12 Jan 2008 20:52:27 +0200, Jarkko Kuoppamäki
    <> wrote:

    >
    >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.
     
    richard, Jan 13, 2008
    #7
  8. Re: A rowspan cell grows - how to get only 1 of the adjacent onesto grow?

    richard wrote:
    > On Sat, 12 Jan 2008 20:52:27 +0200, Jarkko Kuoppamäki
    > <> wrote:
    >
    >> 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>


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


    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Jan 13, 2008
    #8
  9. Jarkko Kuoppamäki

    Ben C Guest

    Re: A rowspan cell grows - how to get only 1 of the adjacent ones to grow?

    On 2008-01-12, Jarkko Kuoppamäki <> wrote:
    >
    > 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.
     
    Ben C, Jan 13, 2008
    #9
  10. Jarkko Kuoppamäki

    richard Guest

    Re: A rowspan cell grows - how to get only 1 of the adjacent ones to grow?

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

    >richard wrote:
    >> On Sat, 12 Jan 2008 20:52:27 +0200, Jarkko Kuoppamäki
    >> <> wrote:
    >>
    >>> 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>

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


    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, Jan 14, 2008
    #10
  11. Jarkko Kuoppamäki

    richard Guest

    Re: A rowspan cell grows - how to get only 1 of the adjacent ones to grow?

    On Sun, 13 Jan 2008 16:50:45 -0600, Ben C <> wrote:

    >On 2008-01-12, Jarkko Kuoppamäki <> wrote:
    >>
    >> 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.


    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.
     
    richard, Jan 14, 2008
    #11
  12. Re: A rowspan cell grows - how to get only 1 of the adjacent onesto grow?

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


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


    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.

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Jan 14, 2008
    #12
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Dobieslaw Wroblewski

    JPanel grows too wide - how to stop it?

    Dobieslaw Wroblewski, Jan 29, 2005, in forum: Java
    Replies:
    0
    Views:
    636
    Dobieslaw Wroblewski
    Jan 29, 2005
  2. Replies:
    2
    Views:
    410
    Lauri Raittila
    Sep 16, 2005
  3. vj
    Replies:
    2
    Views:
    564
    Jeff Kish
    May 5, 2006
  4. Steffen Krippner
    Replies:
    0
    Views:
    265
    Steffen Krippner
    Nov 14, 2003
  5. Steffen Krippner
    Replies:
    0
    Views:
    359
    Steffen Krippner
    Nov 14, 2003
Loading...

Share This Page