HTML/CSS tables: column resizing and row height

[scott182]

I'm working on designing a PHP/MySQL movie list for my personal use, and trying to redesign it so it has an iTunes-like interface.

So my question is: when columns in a table are resized, for example, by resizing the browser window, is there any way with HTML/CSS to create the "..." effect that iTunes does with the extra text that doesn't fit in a column, rather than making the row taller to accommodate the extra text? Or is there a better way to do this? (I don't want to learn Javascript right now.) I included a picture of what I have now, followed by an iTunes screenshot of the effect that I'm thinking of.

Sorry if this is confusing; I don't really know how to search for it on the web, and I'm just beginning with CSS. I always thought CSS was more difficult to learn than it is.

Thanks in advance,

Scott

 

[arn]

apparently it is possible, but perhaps it is js.

do you have Tiger? Safari's RSS pages do it with the title of the page. I haven't looked to see how it's done, but you can look at the source to try to figure it out

See example:

 

[scott182]

I don't have Tiger yet, maybe I'll try to find someone that does. Something tells me they probably do that with Javascript though...

 

[scott182]

Apparently it can be done with CSS, now I just need to figure out how to do it in my code.

Here's an example:

http://joelpt.eml.cc/TextOverflowEllipsis.html

Source code:

<center>
Below is a sentence enclosed in a normal DIV tag.
<div STYLE="width:75%;background-color:yellow;padding:5px;border:1px solid black"> <nobr>As you can see, this would work very well in the fastmail interface, and as more browsers support it, could easily become the preferred presentation style for Fastmail users. </nobr></div>

<P>
And here is that same sentence in a DIV tag which has the <B>text-overflow:ellipsis</B> style attribute<BR>(as well as overflow:hidden).
<div STYLE="width:75%;background-color:yellow;padding:5px;border:1px solid black;overflow:hidden;text-overflow:ellipsis"> <nobr>As you can see, this would work very well in the fastmail interface, and as more browsers support it, could easily become the preferred presentation style for Fastmail users. </nobr></div>

</center>

 

[Mitthrawnuruodo]

That's kind of cool...

Although the box is just cut off in Firefox without the '...' at the end.

And if you set width in % inside another element Firefox gets that right, but Safari doesn't.

How does it look in IE under Windows?

 

[MontyZ]

The CSS solution is the "automatic" way to do this, but, it doesn't work consistently in all browsers yet.

 

[scott182]

And if you set width in % inside another element Firefox gets that right, but Safari doesn't.

How does it look in IE under Windows?

Hmm....I can't seem to get it working within the tables -- maybe because I have <td> widths set in percentages. I'll have to keep looking at it, and learning CSS.

Right now, I'm only concerned with getting it to look right in Safari, as it's just running on my machine. I haven't opened IE on Windows in at least 2 years, since I started using Mozilla and Firebird/Firefox.