我想以表格格式将数据显示为两部分(左和右)。例如我有 20 行的数据。我需要将前 10 行显示到带有标题的左侧。剩下的 10 行需要显示在右侧,标题相同,如下图所示,我想为两个表应用分页。我怎样才能做到这一点。
请帮助我,在此先感谢。
tableData = [{name:'abc',phone:1111},{name:'xyz',phone:1111},{name:'mno',phone:1111},{name:'pqr',phone:1111}]
<div class="row">
<div class="col-6">
<table class="table">
<thead>
<tr>
<th></th>
<th>Name</th>
<th>Phone</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let data of tableData; let i = index">
<td><span>{{i+1}}</span></td>
<td><span>{{data.name}}</span></td>
<td><span>{{data.phone}}</span></td>
</tr>
</tbody>
</table>
</div>
<div class="col-6">
<table class="table">
<thead>
<tr>
<th></th>
<th>Name</th>
<th>Phone</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let data of tableData; let i = index">
<td><span>{{i+1}}</span></td>
<td><span>{{data.name}}</span></td>
<td><span>{{data.phone}}</span></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="row">
<div class="col-4">
<app-pagination [size]=" (tableData).length " [items]="Items "></app-pagination>
</div>
</div>
最佳答案
添加了带有“display:flex”的样式。希望这有助于并排打印两个表格。
tableData = [{name:'abc',phone:1111},{name:'xyz',phone:1111},{name:'mno',phone:1111},{name:'pqr',phone:1111}]
<div class="row" style="display:flex">
<div class="col-6">
<table class="table">
<thead>
<tr>
<th></th>
<th>Name</th>
<th>Phone</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let data of tableData; let i = index">
<td><span>{{i+1}}</span></td>
<td><span>{{data.name}}</span></td>
<td><span>{{data.phone}}</span></td>
</tr>
</tbody>
</table>
</div>
<div class="col-6">
<table class="table">
<thead>
<tr>
<th></th>
<th>Name</th>
<th>Phone</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let data of tableData; let i = index">
<td><span>{{i+1}}</span></td>
<td><span>{{data.name}}</span></td>
<td><span>{{data.phone}}</span></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="row">
<div class="col-4">
<app-pagination [size]=" (tableData).length " [items]="Items "></app-pagination>
</div>
</div>
关于html - 如何将html表格分成两部分?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59297908/