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
- “Adequacy is sufficient” – but it’s never going to make you proud – November 2011
- How to: Get a white screen – June 2011
- Viewing dynamically generated HTML in the HTML Help viewer – November 2010
- Deleting those pesky lines in Microsoft Word – August 2010
- EasyListener resurrected – June 2010
