Zweite <tr> Ursachen Tabellenbreite weirdly auf großem Tisch zu erweitern

Question

ich folgende HTML/Razor bin mit einer Detail Zeilen zu erstellen, wenn der Benutzer klickt auf die Run App Taste. Die primäre Zeile ist 4 Spalten breit und die Detailzeile umfasst die 4 Spalten.

Detailzeile Versteckt

Details sichtbar Hier die Detailzeile bewirkt, dass die Tabelle wirklich seltsam zu erweitern, es ist viel zu groß. Es ist aus irgendeinem Grund nicht in der Mitte.

Kleine Tabelle sieht richtig Alles sieht gut aus, wenn ich die Größe der Tabelle zu reduzieren. Es ist richtig zentriert und sieht nicht super aus.

Dies ist die 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>

Was bin ich mit der Tabelle falsch zu machen, die es verursacht nicht wie die Art und Weise suchen es auf der kleineren Fenster Skala tut?

Answer 1

Entfernen Sie container Klasse hier und es wird normal funktionieren.

<div class="container"> 
    <span> 
    1000 items returned. Only showing the first 10 results.