第二个导致表格宽度在大桌子上奇怪地扩展

Question

当用户点击运行应用按钮时，我使用以下HTML / Razor创建详细信息行。主要行为4列宽，详细信息行跨越4列。

隐藏详细信息行

明细可见 在这里细节行导致表格非常奇怪地扩展，这是一个很大的方式。由于某种原因，它不是中心。

小表看起来正确 当我减小桌子的大小时，一切看起来都很好。它正确居中，看起来并不宽。

这是HTML and a Fiddle

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

我在桌子上做错了什么导致它看起来不像在较小的窗口范围内那样？

Answer 1

在此处删除container课程，它将正常运作。

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