table row heights

A

admin

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
 
J

Jukka K. Korpela

Scripsit (e-mail address removed):
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?
 
A

admin

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

Jukka K. Korpela

Scripsit (e-mail address removed):

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

admin

Scripsit (e-mail address removed):

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

Jonathan N. Little

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

admin

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

Bergamot

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; }
 
A

admin

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.

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

Bergamot

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

Joel Shepherd

[snip stuff about a calendar, which you wouldn't think would get folks'
undies in a bunch, but this _is_ Usenet ...]
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?)
 
J

Jukka K. Korpela

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

Jonathan N. Little

Joel said:
Jonathan N. Little said:
(e-mail address removed) wrote:

[snip stuff about a calendar, which you wouldn't think would get folks'
undies in a bunch, but this _is_ Usenet ...]
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...
 
B

Bergamot

Jonathan said:
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.
 
D

dorayme

Bergamot said:
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).
 

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,744
Messages
2,569,482
Members
44,901
Latest member
Noble71S45

Latest Threads

Top