Is there a way to make a table render with minimal width based on its content? I'm facing an issue with IE7 where it insists on expanding the table to 100% width.
The code snippet below works fine in Firefox and IE8, but not in IE7:
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
table { table-layout: fixed }
td { padding: 0 10px; border: 1px solid blue;}
</style>
</head>
<body>
<table>
<tr>
<td>Column with variable width</td>
<td style="width: 100px;">Column 2</td>
<td style="width: 100px;">Column 3</td>
</tr>
</table>
</body>
</html>
- I have set the table to use table-layout: fixed.
- All cells have specified widths except for the first column.
- In the first column, I want the browser to determine the width based on the content.
- As I cannot predict the width of the first column, I do not specify the overall table width.
The problem in IE7 is that it renders the table at 100% width. This causes the first column to not display its content properly as it takes up all available space.
Here are some observations so far:
- Removing "table-layout: fixed" prevents the table from expanding to 100%, but this is not ideal for my situation.
- Setting a very small table width (e.g., 10px) causes the first column to disappear instead of adjusting to its minimum required width.
- Trying "display: inline;" for the table does not affect the width.
Any suggestions or solutions?
Thank you, Pitter