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:
<style type="text/css">
#divCell
{
width: 148px;
height: 40px;
overflow: auto;
}
</style>
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.
<html>
<head>
<title>148</title>
<style type="text/css">
#divCell
{
width: 148px;
height: 40px;
overflow: auto;
}
</style>
</head>
<body>
<table>
<tr>
<td>
<div id="divCell">
1234567890123456789012345678901234567890123456789012345
</div>
</td>
</tr>
</table>
</body>
</html>
And here is the rendered result.
1234567890123456789012345678901234567890123456789012345
|
Thanks to Bob Vlasek of Omaha NE for sorting that one out for me.