Попытка использовать angular с bootstrap для отображения моих данных.У меня есть фиктивные данные, содержащиеся в компоненте и отображаются в 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>
, поэтому приведенная выше таблица в моем кассовом аппарате просочилась из контейнера, когда он открыт в браузере и в моем нижнем колонтитулене динамически реагирует на приведенную выше таблицу. В конечном итоге будет использовать разбиение на страницы для данных, но я не думаю, что я думаю, что классы начальной загрузки должны динамически настраиваться и на браузер, и на его родительские / дочерние теги div.
См. Изображение ниже, оно вышло за рамки ..
