resizable table

Discussion in 'HTML' started by Bootstrap bill, Jun 23, 2004.

  1. I want a table like this

    +---------------------------------------------------------+
    | row one
    |
    +---------------------------------------------------------+
    |
    |
    | row two
    |
    |
    |
    +---------------------------------------------------------+
    | row three
    |
    +---------------------------------------------------------+

    Row's one and three will be a fixed height. I want row two to fill up
    whatever is left of the window, and the height should change when the window
    is resized. I would prefer a method that is cross platform. Can I do this
    without code?


    --
    "It's easy enough to be pleasant, when life hums along like a song.
    But the man worth while is the man who can smile when
    everything goes dead wrong.".
     
    Bootstrap bill, Jun 23, 2004
    #1
    1. Advertising

  2. Bootstrap bill

    Mitja Guest

    Bootstrap bill <>
    (news:x1lCc.61913$) wrote:
    > I want a table like this
    >
    > +---------------------------------------------------------+
    >> row one
    >>

    > +---------------------------------------------------------+
    >>
    >>
    >> row two
    >>
    >>
    >>

    > +---------------------------------------------------------+
    >> row three
    >>

    > +---------------------------------------------------------+
    >
    > Row's one and three will be a fixed height. I want row two to fill up
    > whatever is left of the window, and the height should change when the
    > window is resized. I would prefer a method that is cross platform.
    > Can I do this without code?


    "Wthout code"? Now _that_ will be a tough one ;)

    Use something like
    <style type="text/css">
    html,body,table {height:100%}
    tr.bar {height:5em;}
    </style>
    <table>
    <tr class="bar"><td>foo</td></tr>
    <tr><td>foo</td></tr>
    <tr class="bar"><td>foo</td></tr>
    </table>

    The preferred way to do it is with divs, though:
    <body style="padding: 150px 0">
    <div style="position:absolute;top:0;left:0">header</div>
    text foo bar
    <div style="position:absolute;bottom:0;left:0">footer</div>
    </body>

    Both untested, but should work.

    If you don't understand what I wrote (HTML&CSS, I mean, not this text), read
    a tutorial on CSS. It's a must. Well... a should :)
     
    Mitja, Jun 23, 2004
    #2
    1. Advertising

  3. Bootstrap bill

    Neal Guest

    On Wed, 23 Jun 2004 21:51:42 +0200, Mitja <> wrote:

    > The preferred way to do it is with divs, though:
    > <body style="padding: 150px 0">
    > <div style="position:absolute;top:0;left:0">header</div>
    > text foo bar
    > <div style="position:absolute;bottom:0;left:0">footer</div>
    > </body>


    One problem is if the user is on a monitor set for 450px high, the center
    section is awfully small. You could impose scrolling on it.

    Another problem is if the header material is larger than 150px. Resizing
    text can cause this problem.

    I think the design idea is flawed from the start, frankly, but there are
    ways of getting it to work the way the OP wants - unfortunately, all
    result in usability problems and/or an ugly design in some environments.
     
    Neal, Jun 23, 2004
    #3
  4. Bootstrap bill

    Whitecrest Guest

    In article <>,
    says...
    > I think the design idea is flawed from the start, frankly, but there are
    > ways of getting it to work the way the OP wants - unfortunately, all
    > result in usability problems and/or an ugly design in some environments.


    But ugly design doesn't matter. It makes no difference what the
    presentation looks like as long as the user can read the content....
    Content and content alone will keep the customer, presentation is
    meaningless...

    Yes, I was being sarcastic, and factious at the same time.

    --
    Whitecrest Entertainment
    www.whitecrestent.com
     
    Whitecrest, Jun 23, 2004
    #4
  5. Mitja wrote:

    > Bootstrap bill <>
    > (news:x1lCc.61913$) wrote:
    >
    >>I want a table like this
    >>> row one
    >>> row two
    >>> row three

    >>Row's one and three will be a fixed height. I want row two to fill up
    >>whatever is left of the window, and the height should change when the
    >>window is resized. I would prefer a method that is cross platform.
    >>Can I do this without code?

    >
    >
    > <div style="position:absolute;bottom:0;left:0">footer</div>

    sorry to disappoint you mitja but that will not work in the way intended
    by bill

    Bill, you could go and look at www.Glish.com and look at the 3-collumn
    solution for inspiration and turn it 90 degreesto fit your problem

    but from what you wrote as intended use - I will make some assumptions
    and sorry if I'm wrong about them - you have the following problem :

    1- you don't know how big the "rest"of the window is in advance because
    it depends on screen resolution
    2- and you don't know how big the window is the users browser is working on
    3- you don't know in advance how much information in going to be in the
    middle part

    If we assume we don't care about the first 2 questions and only take
    account of the answer to 3 the the only problem is when row two
    contains more data lines then screen space ...
    what do you want to happen in that case :
    - you could want your footer row to move down off the screen
    In that case you can let the size of your data determine the size of row
    2 and in case there isn't any row 3 moves up to sit just under row 1

    - or to remain at the bottom of the screen floating over row 2
    see how Z-index works in CSS to achieve the effect
    but I warn you in advance its not obvious and the outcome unpredictable

    I incorporated that information in the header ( row 1) and I abandonned
    the idea of floating that info at the bottom it KISS

    derek
     
    derek giroulle, Jun 23, 2004
    #5
  6. Bootstrap bill

    Mitja Guest

    Neal <>
    (news:eek:) wrote:
    > On Wed, 23 Jun 2004 21:51:42 +0200, Mitja <> wrote:
    >
    >> The preferred way to do it is with divs, though:
    >> <body style="padding: 150px 0">
    >> <div style="position:absolute;top:0;left:0">header</div>
    >> text foo bar
    >> <div style="position:absolute;bottom:0;left:0">footer</div>
    >> </body>

    >
    > One problem is if the user is on a monitor set for 450px high, the
    > center section is awfully small. You could impose scrolling on it.


    My fault - I should have tested it. It only renders in Opera as intended.
    IE and Firefox put div.header at the bottom of the _viewport_. I've never
    used bottom:0 in practice so I must say I was quite surprised to see this. I
    expected the behavior from the specs, at least from Firefox: "In the
    absolute positioning model, a box is explicitly offset with respect to its
    containing block." But then, if things were done as per spec, you shouldn't
    get the behavior OP wanted when text doesn't fill the viewport.
    What have I overlooked?

    > Another problem is if the header material is larger than 150px.
    > Resizing text can cause this problem.


    Agreed. Should be 5em or something.

    > I think the design idea is flawed from the start, frankly, but there
    > are ways of getting it to work the way the OP wants - unfortunately,
    > all result in usability problems and/or an ugly design in some
    > environments.
     
    Mitja, Jun 24, 2004
    #6
  7. Bootstrap bill

    Mitja Guest

    derek giroulle <>
    (news:40da0b4d$0$8396$) wrote:
    > Mitja wrote:
    >
    >> Bootstrap bill <>
    >> (news:x1lCc.61913$) wrote:
    >>
    >>> I want a table like this
    >>>> row one
    >>>> row two
    >>>> row three
    >>> Row's one and three will be a fixed height. I want row two to fill
    >>> up whatever is left of the window, and the height should change
    >>> when the window is resized. I would prefer a method that is cross
    >>> platform. Can I do this without code?

    >>
    >>
    >> <div style="position:absolute;bottom:0;left:0">footer</div>

    > sorry to disappoint you mitja but that will not work in the way
    > intended by bill


    You're right, of course. Sorry for having talked off the top of my head. See
    also my response to Neal.

    > Bill, you could go and look at www.Glish.com and look at the
    > 3-collumn solution for inspiration and turn it 90 degreesto fit your
    > problem
    >
    > but from what you wrote as intended use - I will make some
    > assumptions and sorry if I'm wrong about them - you have the
    > following problem :
    >
    > 1- you don't know how big the "rest"of the window is in advance
    > because it depends on screen resolution
    > 2- and you don't know how big the window is the users browser is
    > working on 3- you don't know in advance how much information in going
    > to be in the middle part
    >
    > If we assume we don't care about the first 2 questions and only take
    > account of the answer to 3 the the only problem is when row two
    > contains more data lines then screen space ...
    > what do you want to happen in that case :
    > - you could want your footer row to move down off the screen
    > In that case you can let the size of your data determine the size of
    > row 2 and in case there isn't any row 3 moves up to sit just under
    > row 1


    Since OP mentioned tables, I think this was the desired behavior. The
    quasi-solution with tables I suggested serves the purpose better, but it
    doesn't work in IE, only FFox&Opera :(
    I also don't know the level of support for html,body,table.main
    {height:100%} in older browsers. Not to mention it's not particularly nice
    from the semantic point of view.

    > - or to remain at the bottom of the screen floating over row 2
    > see how Z-index works in CSS to achieve the effect
    > but I warn you in advance its not obvious and the outcome
    > unpredictable
    >
    > I incorporated that information in the header ( row 1) and I
    > abandonned the idea of floating that info at the bottom it KISS
    >
    > derek
     
    Mitja, Jun 24, 2004
    #7
  8. "Bootstrap bill" <> wrote in message
    news:x1lCc.61913$...
    > I want a table like this


    I'd like to thank everyone for their quick responses. I found a solution to
    my problem and will post the URL to my site in a few days.

    Thanks again!

    -Bill
     
    Bootstrap bill, Jun 24, 2004
    #8
  9. Bootstrap bill

    Whitecrest Guest

    In article <UPGCc.43$>,
    says...
    > I'd like to thank everyone for their quick responses. I found a solution to
    > my problem and will post the URL to my site in a few days.


    Oh sure you will.... You come here, and just take, take, take, and give
    nothing. Then just like that you leave. Oh sure, you say you will
    return with a url, but we both know the truth. The minute you leave
    this forum some other fancy forum will catch your eye, and you will
    never be back...

    What about the children? Did you think about them?

    --
    Whitecrest Entertainment
    www.whitecrestent.com
     
    Whitecrest, Jun 24, 2004
    #9
    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. Thiago Almeida

    Resizable columns on a web datagrid

    Thiago Almeida, Oct 15, 2003, in forum: ASP .Net
    Replies:
    0
    Views:
    765
    Thiago Almeida
    Oct 15, 2003
  2. =?Utf-8?B?TWF0dCBIYW1pbHRvbg==?=

    RE: Are datagrids in Windows Application resizable?

    =?Utf-8?B?TWF0dCBIYW1pbHRvbg==?=, Sep 1, 2004, in forum: ASP .Net
    Replies:
    1
    Views:
    367
    =?Utf-8?B?Tm9lbCBMYXdhcw==?=
    Sep 2, 2004
  3. Bootstrap bill

    resizable table

    Bootstrap bill, Jun 23, 2004, in forum: Javascript
    Replies:
    4
    Views:
    195
    Bootstrap bill
    Jun 24, 2004
  4. Liming

    Resizable and swappable html table

    Liming, Jul 7, 2005, in forum: Javascript
    Replies:
    0
    Views:
    98
    Liming
    Jul 7, 2005
  5. solenero

    resizable table cols

    solenero, Oct 11, 2005, in forum: Javascript
    Replies:
    1
    Views:
    331
    Baconbutty
    Oct 12, 2005
Loading...

Share This Page