«

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

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

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/

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.

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/

On Jan 4, 10:59 am, "Jukka K. Korpela" <jkorp...@cs.tut.fi> wrote:
> Scripsit a...@daytonalink.com:
>
> > 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/

wrote:
>
> On Jan 4, 10:59 am, "Jukka K. Korpela" <jkorp...@cs.tut.fi> wrote:
>> Scripsit a...@daytonalink.com:
>>
>>> 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

On Jan 4, 12:33 pm, "Jonathan N. Little" <lws4...@centralva.net> wrote:
> a...@daytonalink.com wrote:
>
> > On Jan 4, 10:59 am, "Jukka K. Korpela" <jkorp...@cs.tut.fi> wrote:
> >> Scripsit a...@daytonalink.com:
>
> >>> 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?

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

On Jan 4, 3:31 pm, Bergamot <berga...@visi.com> wrote:
> a...@daytonalink.com 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