Why isn't my container DIV expanding to the width of the large table?
<html>
<head>
<link rel="stylesheet" href="http://www.blueprintcss.org/blueprint/screen.css" type="text/css" media="screen, projection" />
<link rel="stylesheet" href="http://www.blueprintcss.org/blueprint/print.css" type="text/css" media="print" />
<!--[if lt IE 8]><link rel="stylesheet" href="http://www.blueprintcss.org/blueprint/ie.css" type="text/css" media="screen, projection" /><![endif]-->
<style type="text/css">
div.add-padding {
padding: 15px;
background-color: red;
}
table {
background-color: blue;
}
</style>
</head>
<body>
<div class="add-padding">
<table>
<thead>
<tr><td>FOO</td></tr>
</thead>
<tbody>
<tr><td>BAR</td></tr>
</tbody>
</table>
<table>
<thead>
<tr>
... (large table content continues)
</tr>
</thead>
<tbody>
<tr>
... (more table rows with content identical for each cell)
</tr>
</tbody>
</table>
</div>
</body>
</html>