Bootstrap 5 Table nesting

Bootstrap 5 Table nesting is used to make a table inside of a table. Nesting is an important feature that is used in all the elements, especially on the listing.

Bootstrap 5 Table nesting Class: There is no class for nesting the table, we just remember one thing which is the width of the table nested table, which can be defined by the use of td colspan attribute.

Syntax:

<table class="table ...">
 <thead>
 ...
 </thead>
 <tbody>
 ...
 <tr>
 <td colspan="..">
 <table class="table">
 ...
 </table>
 </td>
 </tr>
 ...
 </tbody>
</table>

Example 1: In this example, we will create a nesting table where the main table contains 3 rows and one of the rows will contain another table to make that table nested.

Output:

👁 Image

Example 2: In this example, we will add style to the outside table to check that the style of the outer table can not reach the nested table.

Output: As we can see the inner table is not affected by the striped-table class.

👁 Image

Reference: https://getbootstrap.com/docs/5.0/content/tables/#nesting