Setting a maximum width for a table
June 29th, 2004
I often seem to need to create tables that shrink and grow in width within a minimum and maximum limit. This should be easy with CSS, using the max-width table property. However, this isn't supported in IE, so I used to use some fiendishly complex ways of achieving this.
The minimum width bit is simple. Just put something in the table that can't break. For example, you can use a 1x1 pixel gif image, stretched to the desired width.
It's the maximum width bit that's the difficult part. However, the following bit of code shows how to achieve this easily. I found this somewhere and have unfortunately forgotten where it came from. So apologies for not crediting the original author.
<html>
<head>
<style type="text/css">
.MaxWidthTable {
width: 100%;
max-width: 500px;
width: expression(document.body.clientWidth > 500
? "500px" : "100%" );
border: solid black 1px;
}
</style>
</head>
<body>
<table class="MaxWidthTable">
<tr>
<td>Contents of table here ...</td>
</tr>
</table>
</body>
</html>
Fill the table up with content and check out how it expands to 500 pixels wide and then stops. The CSS uses the max-width property, but also uses an expression to say: IF the width is more than 500 pixels THEN make the width 500 pixels ELSE make the width 100%.
Potentially similar posts
- Adding function buttons to the Madcap Flare WebHelp toolbar – January 2010
- Overcoming hard-coded styles in Madcap Flare – December 2009
- PHP (or Perl) one line if/then/else statements – August 2009
- Solving font weirdness in Adobe Distiller – April 2009
- Viewing dynamically generated HTML in a help topic – January 2009