Question

尝试在引导程序中使用angular来显示我的数据。我将模拟数据包含在组件中，并显示在组件的html文件中。我不知道为什么当表格变大时，它没有向下推动（响应）父对象的内容，而是超出了容器并超过了页脚组件。

这是我的index.html：

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Title here</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>

<body>
  <app-root></app-root>
</body>

</html>

这是我的app.component.html，基本上是路由到我的home组件：

<router-outlet></router-outlet>

这是我的home.component.html：

<div class="container-fluid" style="height: 100%; background-color: rgba(255,0,0,0.1);">
  <div class="row" style="height:13%; background-color: rgba(136, 255, 0, 0.1)">
    <div class="col-md-12">
      <app-header></app-header>
    </div>
  </div>
  <div class="row" style="height:77%;">
    <div class="col-md-2" style="height:100%; background-color: rgba(255, 0, 179, 0.1)">
      <app-sidemenu></app-sidemenu>
    </div>
    <div class="col-md-10" style="height:100%; background-color: rgba(170, 48, 58, 0.1)">
      <app-cashplanner></app-cashplanner>
    </div>
  </div>
  <div class="row" style="height:10%; background-color: rgba(16, 16, 212, 0.1)">
    <div class="col-md-12">
      <app-footer></app-footer>
    </div>
  </div>
</div>

我要显示的数据在<app-cashplanner>组件中。 cashplanner.component.html看起来像这样（您可以想象这里有数百行：

<div class="container">
  <div class="row">
    <table id="dt-material-checkbox" class="table table-striped" cellspacing="0" width="100%">
      <thead>
        <tr>
          <th></th>
          <th class="th-sm">Position
          </th>
          <th class="th-sm">Office
          </th>
          <th class="th-sm">Age
          </th>
          <th class="th-sm">Start date
          </th>
          <th class="th-sm">Salary
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td></td>
          <td>System Architect</td>
          <td>Edinburgh</td>
          <td>61</td>
          <td>2011/04/25</td>
          <td>$320,800</td>
        </tr>
        <tr>
          <td></td>
          <td>Accountant</td>
          <td>Tokyo</td>
          <td>63</td>
          <td>2011/07/25</td>
          <td>$170,750</td>
        </tr>
        <tr>
          <td></td>
          <td>Junior Technical Author</td>
          <td>San Francisco</td>
          <td>66</td>
          <td>2009/01/12</td>
          <td>$86,000</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <th>Name
          </th>
          <th>Position
          </th>
          <th>Office
          </th>
          <th>Age
          </th>
          <th>Start date
          </th>
          <th>Salaryzz
          </th>
        </tr>
      </tfoot>
    </table>
  </div>
</div>

因此，当我的Cashplanner中的以上表格在浏览器中打开时，该表格从容器中泄漏出来，并且我的页脚未动态响应其上方的表格。最终将对数据使用分页，但是我没有得到的是我认为bootstrap类也应该也可以根据浏览器及其父/子div标签进行动态调整。

见下图，它超出了范围。

Answer 1

尝试将table-responsive类添加到包含div的{{1}}中。

为什么我的<table>数据从其父级的<div>引导容器中溢出？

1 个答案: