Html 为什么我的<；表>；从其父级溢出的数据'；s<；部门>；引导容器？_Html_Css_Angular_Bootstrap 4

Html 为什么我的<；表>；从其父级溢出的数据'；s<；部门>；引导容器？

html css angular bootstrap-4

Html 为什么我的<；表>；从其父级溢出的数据'；s<；部门>；引导容器？,html,css,angular,bootstrap-4,Html,Css,Angular,Bootstrap 4,尝试使用angular和引导来显示我的数据。我将模拟数据包含在组件中，并显示在组件的html文件中。我不知道为什么当表变大时，它没有向下推（响应）父内容，而是超出了容器，超出了页脚组件这是我的index.html： <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Title here</title> <base

尝试使用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>

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

这是我的

home.component.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>

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

因此，当我的cashplanner中的上表在浏览器中打开时，它会从容器中泄漏出来，并且我的页脚不会动态响应它上面的表。最终将对数据使用分页，但我没有得到的是，我认为引导类也应该根据浏览器及其父/子div标记进行动态调整

如下图所示，它超出了

尝试将

表响应类添加到包含表的div
中
 我的footer
组件的html
和css
几乎没有任何内容footer.component.css
为空，footer.component.html
只有footer有效
 
就这样。我正在测试（这就是为什么文件几乎是空的）页脚是否粘在上面的内容上，但显然不是。