Topic: Nested table does not work
I am trying to display nested table. However it displays child table as another column in main table. What am I doing wrong?
<table class="table">
<thead>
<tr>
<th class="fw-bold" scope="col">Report Type</th>
<th class="fw-bold" scope="col">Year</th>
<th class="fw-bold" scope="col">Quarter</th>
<th class="fw-bold" scope="col">Reported Date</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let t of table.data; let i = index" scope="row">
<td>{{t.reportTypeDesc}}</td>
<td>{{t.year}}</td>
<td>{{t.quarter}}</td>
<td>{{t.reportedDate}}</td>
<td colspan="4">
<table class="table mb-0">
<tr>
<td>
<span *ngFor="let s of t.statements; let si=index">
<i class="far fa-file-pdf document-icon-pdf" aria-hidden="true" title="{{s.documentName}}" (click)="$event.stopPropagation()"></i>
</span>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
Please have a look at this structure. I've added a <tfoot> element for footer. Let me know if you can accomodate this example for your needs:
<table class="table table-striped table-bordered">
<thead>
<tr>
<th class="fw-bold" scope="col">Report Type</th>
<th class="fw-bold" scope="col">Year</th>
<th class="fw-bold" scope="col">Quarter</th>
<th class="fw-bold" scope="col">Reported Date</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>mdo</td>
</tr>
<tr>
<td colspan="4">
<table class="table mb-0">
<thead>
<tr>
<th scope="col">Header</th>
<th scope="col">Header</th>
<th scope="col">Header</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">A</th>
<td>First</td>
<td>Last</td>
</tr>
<tr>
<th scope="row">B</th>
<td>First</td>
<td>Last</td>
</tr>
<tr>
<th scope="row">C</th>
<td>First</td>
<td>Last</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">Nested table footer content</td>
</tr>
</tfoot>
</table>
</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>twitter</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4">
Long Row Lorem ipsum dolor sit, amet consectetur adipisicing elit. Autem quisquam,
consequuntur, necessitatibus nesciunt ut recusandae, non similique dolor hic porro iusto
repellat sed sit reprehenderit enim culpa maiores accusantium repudiandae illum distinctio
nemo eos. Nemo, velit obcaecati! Itaque dicta eos quam placeat ipsam inventore, repellendus
amet ratione autem architecto aut?
</td>
</tr>
</tfoot>
</table>
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Answered
Specification of the issue
- ForumUser: Pro
- Premium support: No
- Technology: MDB Angular
- MDB Version: MDB5 6.1.0
- Device: Laptop
- Browser: chrome
- OS: W10
- Provided sample code: No
- Provided link: No
Rafał Seifert free commented 3 months ago
What is the purpose of nesting a table inside another table? I don't think we support such styling. Do you have some specific reason to structure your html in such a way? You could propably get away with using flexbox or css grid to place items in appropirate table cells.
ammi pro commented 3 months ago
you have example for Nesting, but it is not completed probably.
https://mdbootstrap.com/docs/angular/data/tables/
I have long line in last column of the row, so I want to display it as a footer for the row.