text overflow or wrap in table cells

[Ovatvvon]

Hi,

I have a table with multiple columns. In many cases, the text is longer than the width of the column, however, if the browser is on a larger screen, the text may not fill each cell (this is pretty much how I want it). The one thing I need to change is that I want the text to disappear if it is longer than the cell.

So for instance, if I have a string of text that reads: "Go down stairs and retrieve a cup of water.", and on a 800x600 screen the table cell containing this text is 50px wide. Instead of wrapping down, or forcing the cell to take up the required 200px, I'd rather have all the text hide behind the table once it hits the cell-end. On the same note, if the browser is expanded to 1024x768 resolution, thereby allowing more space, I would like the text to be revealed as it expands.

I am certain I have seen this before, but cannot remember how it was done. Does anyone else know?

-Ovatvvon :-Q

 

[mkrausnick]

That would be

<table style="table-layout:fixed">

Mike Krausnick
Dublin, California

 

[Ovatvvon]

mkrausnick,

Thank you for responding. That does partially what I want, however, I would like the cells to be able to change size when a user stretches their browser, so the cells will grow based on percentage of the page, and as they grow, they will reveal more text that was hidden. With the table-layout:fixed tag, it forces the table to be fixed, and thus can never grow/stretch to reveal more text.

Is there another tag besides fixed that would allow me to do this?

-Ovatvvon :-Q

 

[mkrausnick]

Hmmm. Not sure. Off the top of my head, how about a div within the cell with an OVERFLOW style. I don't even know if that's legal. Like I said, off the top. For that matter, what about applying the OVERFLOW style to the cell?


Mike Krausnick
Dublin, California

 

[ChrisHunt]

Try:

td, th { overflow: hidden }

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[Ovatvvon]

I altered it a bit by trying style='overflow:hidden;' in both the table and td tags...but it didn't work.

-Ovatvvon :-Q

 

[ChrisHunt]

In that case, like Mike said, you might need to nest a <div> inside the cell and apply the CSS to that.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd