Recently I was trying to solve a problem with an long text string that widened a table beyond its required width - causing the page to go out of alignment. Like a lot of you readers I'm a code junky who picks up CSS and style tips as I need them. So when I run into odd issues that I've not seen before I always need a little help. I was given this little tidbit that seems to work in IE, Firefox, Opera and Netscape 7.
It seems there is an "overflow" attribute you can use. For example:
Using this attribute you can force a behavior on the offending cell. The possible attribues are:
- Visible - the content doesn't wrap and the table widens. This is the default behavior.
- Hidden - the content is truncated and not shown. No visible way to "see" it in this case.
- scroll - the content is truncated but there is a scroll bar for viewing.
- auto - IF the content is truncated the browser displays a scroll-bar (how is this different from "scroll"?).
Here's a sample of the "auto" behavior.
And here is the rendered result.
Thanks to Bob Vlasek of Omaha NE for sorting that one out for me.