时间戳

首页 > 解决方案 > 如何将html表格分成两部分？

html - 如何将html表格分成两部分？

问题描述

我想以表格格式将数据显示为两部分（左和右）。例如 ia 有 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>

标签： htmlcsstypescriptbootstrap-4angular7

解决方案

添加了带有“display:flex”的样式。希望这有助于并排打印两张表。

根据评论，请参考 https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Traversing_an_HTML_table_with_JavaScript_and_DOM_Interfaces

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>

推荐阅读