The HTML below is a cut-down version of a report template with a header block at the top followed by a table that, ultimately, will contain the report data. I want to ensure that the header automatically 'shrinks' to match the width of the table (rather than extend to full width of the window). I have tried using "width:auto" in various places to no avail.
Any help would be appreciated.
Any help would be appreciated.
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL]
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body { font-family:verdana; font-size:7pt; }
</style>
<title>Title</title>
</head>
<body>
<div style="width:auto;background-color:yellow;">
<div style="height:80px; border: solid 2px blue; background-color:lightgreen">
<div style="height:50px; text-align:center">
<p>Report Title</p>
</div>
</div>
<table style="background-color:pink">
<tr>
<td>Column 01</td>
<td>Column 02</td>
<td>Column 03</td>
<td>Column 04</td>
<td>Column 05</td>
<td>Column 06</td>
<td>Column 07</td>
<td>Column 08</td>
</tr>
</table>
</div>
</body>
</html>