尝试使用带有 Bootstrap 的 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 ，基本上它是路由到我的家庭组件:
<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 标签。
见下图，它超越了..
最佳答案
尝试将 table-responsive 类添加到包含 table 的 div。
关于html - 为什么我的 <table> 数据会溢出其父级的 <div> 引导容器？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58004091/