table row heights

Discussion in 'HTML' started by admin@daytonalink.com, Jan 4, 2007.

  1. Guest

    How can I get all of the rows in a table to have consistent heights?
    Rows with lots of content have larger heights than those with little.
    I've used "table-layout:fixed" for consistent columns and was wondering
    if there was anything for consistent rows.

    Thanks!

    Blake
     
    , Jan 4, 2007
    #1
    1. Advertising

  2. Toby Inkster Guest

    admin wrote:

    > How can I get all of the rows in a table to have consistent heights?


    TR, TD, TH { height: 2em; }

    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me ~ http://tobyinkster.co.uk/contact
     
    Toby Inkster, Jan 4, 2007
    #2
    1. Advertising

  3. Scripsit :

    > How can I get all of the rows in a table to have consistent heights?


    Why should the heights be the same (which is probably what you mean by
    "consistent")?

    As usual, a URL would help us to guess what the real problem is.

    > Rows with lots of content have larger heights than those with little.


    As they should, should they not?

    > I've used "table-layout:fixed" for consistent columns


    That's for fixed layout, which is a different thing. You _can_ use it to
    make columns have the same width, but it really depends on the data whether
    that's a good idea.

    > and was
    > wondering if there was anything for consistent rows.


    Well, what did you try? The obvious method is to set the height of tr
    elements, e.g.
    tr { height: 3em; }
    Maybe you set the height too small. What did you expect to happen then -
    vertical truncation? By CSS 2 spec, you cannot set the height of a table
    cell smaller than the height required by its content, see
    http://www.w3.org/TR/REC-CSS2/tables.html#height-layout

    What you _can_ do is to wrap the contents of a cell in a div element and set
    its height. By default, any overflowing content will then mix things up by
    flowing over other cells or other elements on the page. So what do you
    really want?

    --
    Jukka K. Korpela ("Yucca")
    http://www.cs.tut.fi/~jkorpela/
     
    Jukka K. Korpela, Jan 4, 2007
    #3
  4. Guest

    Here's what I'm looking at:
    http://daytonalink.com/cal.png

    I'm making a calendar that has a dynamic height (the height of the
    browser window) and I need the rows to be a consistent height
    regardless of how many events each row has.
     
    , Jan 4, 2007
    #4
  5. Scripsit :

    > Here's what I'm looking at:
    > http://daytonalink.com/cal.png


    Yawn. You didn't specify what you are commenting on (there _is_ such a thing
    as the mistake of not quoting or paraphrasing _anything_), and you posted
    the URL of an image, not of a web page (HTML document). So we can't see what
    you tried in order to set (suggest) row height.

    > I'm making a calendar that has a dynamic height (the height of the
    > browser window) and I need the rows to be a consistent height
    > regardless of how many events each row has.


    Really? Why? You will easily end up with setting far too high height
    requirements.

    --
    Jukka K. Korpela ("Yucca")
    http://www.cs.tut.fi/~jkorpela/
     
    Jukka K. Korpela, Jan 4, 2007
    #5
  6. Guest

    On Jan 4, 10:59 am, "Jukka K. Korpela" <> wrote:
    > Scripsit :
    >
    > > Here's what I'm looking at:
    > >http://daytonalink.com/cal.pngYawn. You didn't specify what you are commenting on (there _is_ such a thing

    > as the mistake of not quoting or paraphrasing _anything_), and you posted
    > the URL of an image, not of a web page (HTML document). So we can't see what
    > you tried in order to set (suggest) row height.


    WTF? The giant calendar/table dominating the screenshot. That's what
    I'm commenting on. I've tried everything I can think of. Right now I
    don't have a single property relating to the row height.

    Assume that this is what I have:
    #calendar_table{height:300px;}

    Now, how do I make the rows all the same height.

    > > I'm making a calendar that has a dynamic height (the height of the
    > > browser window) and I need the rows to be a consistent height
    > > regardless of how many events each row has.Really? Why? You will easily end up with setting far too high height

    > requirements.


    I don't understand what you are saying in your response. My question is
    can it be done with css or what? Forget the whole "dynamic height"
    thing. Can I get all the rows to be the same height.

    > --
    > Jukka K. Korpela ("Yucca")http://www.cs.tut.fi/~jkorpela/
     
    , Jan 4, 2007
    #6
  7. wrote:
    >
    > On Jan 4, 10:59 am, "Jukka K. Korpela" <> wrote:
    >> Scripsit :
    >>
    >>> Here's what I'm looking at:
    >>> http://daytonalink.com/cal.pngYawn. You didn't specify what you are commenting on (there _is_ such a thing

    >> as the mistake of not quoting or paraphrasing _anything_), and you posted
    >> the URL of an image, not of a web page (HTML document). So we can't see what
    >> you tried in order to set (suggest) row height.

    >
    > WTF? The giant calendar/table dominating the screenshot. That's what
    > I'm commenting on. I've tried everything I can think of. Right now I
    > don't have a single property relating to the row height.


    He meant quoting a reference of previous posts, as I am doing here to
    provide context to your remarks. A screenshot is not really helpful to
    show us what you have tried with your markup, does it?

    >
    > Assume that this is what I have:
    > #calendar_table{height:300px;}
    >
    > Now, how do I make the rows all the same height.


    Why would you ever want to? What would happen if for January 25th you
    had 10 or 20 events that would not fit within a fixed 20% of the table
    height?

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Jan 4, 2007
    #7
  8. Guest

    On Jan 4, 12:33 pm, "Jonathan N. Little" <> wrote:
    > wrote:
    >
    > > On Jan 4, 10:59 am, "Jukka K. Korpela" <> wrote:
    > >> Scripsit :

    >
    > >>> Here's what I'm looking at:
    > >>>http://daytonalink.com/cal.pngYawn. You didn't specify what you are commenting on (there _is_ such a thing
    > >> as the mistake of not quoting or paraphrasing _anything_), and you posted
    > >> the URL of an image, not of a web page (HTML document). So we can't see what
    > >> you tried in order to set (suggest) row height.

    >
    > > WTF? The giant calendar/table dominating the screenshot. That's what
    > > I'm commenting on. I've tried everything I can think of. Right now I
    > > don't have a single property relating to the row height.He meant quoting a reference of previous posts, as I am doing here to

    > provide context to your remarks. A screenshot is not really helpful to
    > show us what you have tried with your markup, does it?
    >


    Sorry bout that. I'm pretty new to usenet.

    >
    >
    > > Assume that this is what I have:
    > > #calendar_table{height:300px;}

    >
    > > Now, how do I make the rows all the same height.Why would you ever want to? What would happen if for January 25th you

    > had 10 or 20 events that would not fit within a fixed 20% of the table
    > height?
    >

    I don't like the fisheye look that I'm getting with the current table.
    If I had 10 or 20 events I would but an ellipse at the bottom of the
    date or something like that. Trust me, I'll find a solution. Every
    mainstream calendar that I know of has consistent row heights.

    Let's assume that I have this:

    <table style="height:100px">
    <tr><td></td></tr>
    <tr><td>content</td></tr>
    </table>

    How would I get the the two rows to have the same heights without
    assigning each of them a height?
     
    , Jan 4, 2007
    #8
  9. Bergamot Guest

    wrote:
    >
    > Every
    > mainstream calendar that I know of has consistent row heights.


    Those are probably minimum heights, not absolute. An overflow condition
    in tables (i.e. more content than will fit in the specified space)
    automatically expands the cell height and/or width as needed. You'd need
    to manipulate the data server-side first, or client-side with JavaScript
    to change that behavior.

    > <table style="height:100px">
    > How would I get the the two rows to have the same heights without
    > assigning each of them a height?


    Unless the content is all graphics, setting the height in px units is
    not advised. For textual content, ems are a much better choice. And I
    suggest not setting a height on the whole table, especially if the
    number of rows is variable.

    If you put the rules in a stylesheet instead of inline, you can set all
    the cell heights with one descendant rule, plus it won't matter how many
    rows you have, they'll all be equal heights by default.

    <table class="calendar">

    table.calendar td { height: 5em; }

    --
    Berg
     
    Bergamot, Jan 4, 2007
    #9
  10. Guest

    On Jan 4, 3:31 pm, Bergamot <> wrote:
    > wrote:
    >
    > > Every
    > > mainstream calendar that I know of has consistent row heights.Those are probably minimum heights, not absolute. An overflow condition

    > in tables (i.e. more content than will fit in the specified space)
    > automatically expands the cell height and/or width as needed. You'd need
    > to manipulate the data server-side first, or client-side with JavaScript
    > to change that behavior.
    >
    > > <table style="height:100px">
    > > How would I get the the two rows to have the same heights without
    > > assigning each of them a height?Unless the content is all graphics, setting the height in px units is

    > not advised. For textual content, ems are a much better choice. And I
    > suggest not setting a height on the whole table, especially if the
    > number of rows is variable.
    >
    > If you put the rules in a stylesheet instead of inline, you can set all
    > the cell heights with one descendant rule, plus it won't matter how many
    > rows you have, they'll all be equal heights by default.
    >
    > <table class="calendar">
    >
    > table.calendar td { height: 5em; }
    >


    The em heights give the rows the same height but I need the calendar to
    be flexible to fit the height of the user's browser. I already have
    javascript in place that determines the browser height and sets the
    table's accordingly. I just need that consistent height that em's
    provide with the fluid-ness. Do you know how to do this?

    > --
    > Berg
     
    , Jan 4, 2007
    #10
  11. Bergamot Guest

    wrote:
    >
    > On Jan 4, 3:31 pm, Bergamot <> wrote:
    >>
    >> <table class="calendar">
    >> table.calendar td { height: 5em; }

    >
    > The em heights give the rows the same height but I need the calendar to
    > be flexible to fit the height of the user's browser.


    You have also determined that there is sufficient height to hold the
    actual cell contents? Pity the user that has a small viewport. :(

    > I already have
    > javascript in place that determines the browser height and sets the
    > table's accordingly.


    If you already set the table height, the math to set td height should be
    a no-brainer. If you don't know how many rows there are, then any guess
    is as good (or bad) as another.

    --
    Berg
     
    Bergamot, Jan 4, 2007
    #11
  12. In article <a2d88$459d3a70$40cba7cd$>,
    "Jonathan N. Little" <> wrote:

    > wrote:
    > >


    [snip stuff about a calendar, which you wouldn't think would get folks'
    undies in a bunch, but this _is_ Usenet ...]

    > >
    > > Assume that this is what I have:
    > > #calendar_table{height:300px;}
    > >
    > > Now, how do I make the rows all the same height.

    >
    > Why would you ever want to? What would happen if for January 25th you
    > had 10 or 20 events that would not fit within a fixed 20% of the table
    > height?


    Can you say "scroll bar"? Yeah, I thought you could.

    Anything wrong with, say, a scrolling div with a fixed (suggested)
    height?

    (Hint to OP: google "scrolling div html" and go to town.)

    (Hint to OPRs: Yes, arguing is fun, and some of us get paid to do it
    even, but for the love of Pete, eventually you have to get something
    _done_. What would happen to alt.html if for a day people discussed how
    to get stuff done, instead of offering every reason under the sun for
    why one shouldn't even try. What, would the world turn to a cold black
    cinder?)

    --
    Joel.
     
    Joel Shepherd, Jan 5, 2007
    #12
  13. Scripsit Joel Shepherd:

    > (Hint to OPRs: Yes, arguing is fun, and some of us get paid to do it
    > even, but for the love of Pete, eventually you have to get something
    > _done_.


    Something, yes. But if you think you _have_ to get yet another calendar done
    using some clumsy techniques and wrong design principles, you should _hire_
    someone to do that.

    As you might have noticed, this is a discussion forum, not a helpdesk, or a
    free consultation desk.

    --
    Jukka K. Korpela ("Yucca")
    http://www.cs.tut.fi/~jkorpela/
     
    Jukka K. Korpela, Jan 5, 2007
    #13
  14. Joel Shepherd wrote:
    > In article <a2d88$459d3a70$40cba7cd$>,
    > "Jonathan N. Little" <> wrote:
    >
    >> wrote:

    >
    > [snip stuff about a calendar, which you wouldn't think would get folks'
    > undies in a bunch, but this _is_ Usenet ...]
    >
    >>> Assume that this is what I have:
    >>> #calendar_table{height:300px;}
    >>>
    >>> Now, how do I make the rows all the same height.

    >> Why would you ever want to? What would happen if for January 25th you
    >> had 10 or 20 events that would not fit within a fixed 20% of the table
    >> height?

    >
    > Can you say "scroll bar"? Yeah, I thought you could.


    That was essentially my point and was getting the OP to think of
    conditions he may not have taken into consideration. Look, by is nature
    a TABLE "wants" to expand to accommodate the content. It would be a
    silly table otherwise unless you are using a table for layout...hmmm
    maybe that the case here, eh?

    To OP: using DIVs would better suit your needs. If you need a hammer
    don't grab a screwdriver even though you can hammer nail with the
    screwdriver, sort of...


    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Jan 5, 2007
    #14
  15. Bergamot Guest

    Jonathan N. Little wrote:
    >
    > To OP: using DIVs would better suit your needs.


    I think a table is more suitable for formatting a calendar.

    --
    Berg
     
    Bergamot, Jan 5, 2007
    #15
  16. Bergamot wrote:
    > Jonathan N. Little wrote:
    >> To OP: using DIVs would better suit your needs.

    >
    > I think a table is more suitable for formatting a calendar.
    >

    Not if he want explicit container height...

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Jan 5, 2007
    #16
  17. Bergamot Guest

    Jonathan N. Little wrote:
    > Bergamot wrote:
    >> Jonathan N. Little wrote:
    >>> To OP: using DIVs would better suit your needs.

    >>
    >> I think a table is more suitable for formatting a calendar.
    >>

    > Not if he want explicit container height...


    Dontcha think that's advocating the use of incorrect markup for
    stylistic reasons? It's not so different from using blockquote just
    because it usually indents, not because the content is actually quoted
    material.

    --
    Berg
     
    Bergamot, Jan 5, 2007
    #17
  18. dorayme Guest

    In article <>,
    Bergamot <> wrote:

    > Jonathan N. Little wrote:
    > > Bergamot wrote:
    > >> Jonathan N. Little wrote:
    > >>> To OP: using DIVs would better suit your needs.
    > >>
    > >> I think a table is more suitable for formatting a calendar.
    > >>

    > > Not if he want explicit container height...

    >
    > Dontcha think that's advocating the use of incorrect markup for
    > stylistic reasons? It's not so different from using blockquote just
    > because it usually indents, not because the content is actually quoted
    > material.


    It might be if there could not be valid reasons for wanting
    explicit heights. Using blockquote because it usually indents
    would be no big crime if it was very awkward to achieve indents
    any other way (which it is not).

    --
    dorayme
     
    dorayme, Jan 5, 2007
    #18
    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. tshad

    TextBox heights

    tshad, Jun 24, 2005, in forum: ASP .Net
    Replies:
    1
    Views:
    537
    =?Utf-8?B?V2FyYW4=?=
    Jun 24, 2005
  2. Sandip Chitale
    Replies:
    0
    Views:
    705
    Sandip Chitale
    Aug 7, 2003
  3. Lot-o-fun
    Replies:
    13
    Views:
    628
    Karl Groves
    Apr 29, 2004
  4. phl
    Replies:
    1
    Views:
    4,379
    Martin Jay
    Jun 8, 2006
  5. Iain

    Gridview - fixing row heights

    Iain, Oct 1, 2009, in forum: ASP .Net
    Replies:
    6
    Views:
    821
    Gregory A. Beamer
    Oct 2, 2009
Loading...

Share This Page