html - 如何将html表分为两部分？

我想以表格格式将数据分为两部分（左和右）。例如，我有20行数据。我需要在标题的左侧显示前10行。剩余的10行需要在右侧显示，并具有以下相同的标题，如下图所示，我想对两个表都应用分页。我怎么能做到这一点。

请帮助我，在此先感谢。

Image (click here)

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”的样式。希望这有助于并排打印两个表。

根据评论，请参考
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>