Second <tr> causes table width to expand weirdly on large table - html

Question

I am using the following HTML/Razor to create a details row for when the user clicks the Run App button. The primary row is 4 columns wide, and the details row spans the 4 columns.
Detail Row Hidden
Detail visible
Here the detail row causes the table to expand really weirdly, it's way to large. It's not center either for some reason.
Small Table looks correct
It all looks fine when I reduce the size of the table. It's centered correctly and doesn't look super wide.
This is the HTML and a Fiddle
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<table class="table table-hover table-responsive">
<thead>
<tr>
<th>Components</th>
<th>Name</th>
<th>Description</th>
<th>Options</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data Access,Querying</td>
<td>Basic Querying</td>
<td>Executes a stored procedure, fetching a single result set, without sending data in to the database.</td>
<td>
<button type="button" data-app="5625ad80-a1c7-4dfd-baeb-744d4de5292e" data-vm-required="False" class="btn btn-success">
Run App
</button>
</td>
</tr>
<tr class="">
<td colspan="4">
<div class="container">
<div class="alert alert-info" data-app="5625ad80-a1c7-4dfd-baeb-744d4de5292e">
<div class="container">
<span>
1000 items returned. Only showing the first 10 results.
<table class="table table-responsive">
<tbody>
<tr>
<th>PostalCode</th>
<th>City</th>
<th>AddressLine2</th>
<th>AddressLine1</th>
<th>AddressID</th>
</tr>
<tr>
<td>98011</td>
<td>Both</td>
<td></td>
<td>1970 Napa Ct.</td>
<td>1</td>
</tr>
<tr>
<td>98018</td>
<td>Bothell68</td>
<td></td>
<td>9833 Mt. Dias Blv.686</td>
<td>2</td>
</tr>
<tr>
<td>98011</td>
<td>Bothell</td>
<td></td>
<td>7484 Roundtree Drive</td>
<td>3</td>
</tr>
<tr>
<td>98011</td>
<td>Bothell</td>
<td></td>
<td>9539 Glenside Dr</td>
<td>4</td>
</tr>
<tr>
<td>85323</td>
<td>Phoenix</td>
<td></td>
<td>1226 Shoe St.</td>
<td>5</td>
</tr>
<tr>
<td>98011</td>
<td>Bothell</td>
<td></td>
<td>1399 Firestone Drive</td>
<td>6</td>
</tr>
<tr>
<td>98011</td>
<td>Bothell</td>
<td></td>
<td>5672 Hale Dr.</td>
<td>7</td>
</tr>
<tr>
<td>98011</td>
<td>Bothell</td>
<td></td>
<td>6387 Scenic Avenue</td>
<td>8</td>
</tr>
<tr>
<td>98011</td>
<td>Bothell</td>
<td></td>
<td>8713 Yosemite Ct.</td>
<td>9</td>
</tr>
<tr>
<td>98011</td>
<td>Bothell</td>
<td></td>
<td>250 Race Court</td>
<td>10</td>
</tr>
</tbody>
</table>
</span>
</div>
</div>
</div>
</td>
</tr>
<tr>
<td>Data Access,Querying</td>
<td>Parameterized Query</td>
<td>Executes a stored procedure, fetching a single result set, filtered by a City passed into the stored procedure.</td>
<td>
<button type="button" data-app="544abdf8-3685-4865-84f5-3d8fd132dd75" data-vm-required="True" data-app-name="Parameterized Query" data-toggle="modal" data-target="#appParameters" class="btn btn-success">
Run App
</button>
</td>
</tr>
<tr class="hidden">
<td colspan="4">
<div class="container">
<div class="alert alert-info" data-app="544abdf8-3685-4865-84f5-3d8fd132dd75">
</div>
</div>
</td>
</tr>
</tbody>
</table>
What am I doing wrong with the table that's causing it to not look like the way it does at the smaller Window scale?

Answer 1

Remove container class here and it will work normally.
<div class="container">
<span>
1000 items returned. Only showing the first 10 results.