第二<tr>は、私は、ユーザーが<em>実行アプリケーション</em>ボタンをクリックしたときのために<em>詳細</em>行を作成するには、次のHTML /カミソリを使用しています

Question

大きなテーブルの上に変なふうに展開するテーブルの幅を引き起こします。プライマリ行は4列幅で、詳細行は4列にまたがります。目に見える

詳細行隠し

詳細はここでは詳細行は、それが大への道だ、テーブルが本当に不気味膨張します。それは何らかの理由で中心ではありません。

小さなテーブル正しい に見える私は、テーブルのサイズを小さくするときに、すべてが正常に見えます。それは正しく中心に置かれており、スーパーワイドには見えません。

これは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>

私はそれはそれは小さなウィンドウスケールでない方法のように見えないように引き起こしているテーブルと間違って何をしていているのですか？

Answer 1

ここでcontainerクラスを削除しても正常に動作します。

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