Open In App

Bootstrap 5 Table nesting

Improve
Improve
Like Article
Like
Save
Share
Report

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.

HTML




<!DOCTYPE html>
<html>
  
<head>
          rel="stylesheet" 
          integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
          crossorigin="anonymous">
</head>
  
<body class="m-3">
    <center>
        <h1 class="text-success">
            GeeksforGeeks
        </h1>
        <strong>Bootstrap 5 Tables Nesting</strong>
    </center>
    <table class="table">
        <thead>
            <tr>
                <th>No</th>
                <th>Course</th>
                <th>Price</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>HTML-Basics</td>
                <td>$15</td>
            </tr>
            <tr>
                <td colspan="4">
                    <table class="table mb-0">
                        <thead>
                            <tr>
                                <th>No</th>
                                <th>Type</th>
                                <th>Course</th>
                                <th>Price</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>1</td>
                                <td>Pre-Processor</td>
                                <td>Yaml</td>
                                <td>$10</td>
                            </tr>
                        </tbody>
                    </table>
                </td>
            </tr>
            <tr>
                <td>2</td>
                <td>CSS-Basics</td>
                <td>$25</td>
            </tr>
        </tbody>
    </table>
  
</body>
  
</html>


Output:

Bootstrap 5 Table nesting

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.

HTML




<!DOCTYPE html>
<html>
  
<head>
          rel="stylesheet" 
          integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
          crossorigin="anonymous">
</head>
  
<body class="m-3">
    <center>
        <h1 class="text-success">
            GeeksforGeeks
        </h1>
        <strong>Bootstrap 5 Tables Nesting</strong>
    </center>
    <table class="table table-striped">
        <thead>
            <tr>
                <th>No</th>
                <th>Course</th>
                <th>Price</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>HTML-Basics</td>
                <td>$15</td>
            </tr>
            <tr>
                <td colspan="4">
                    <table class="table mb-0">
                        <thead>
                            <tr>
                                <th>No</th>
                                <th>Type</th>
                                <th>Course</th>
                                <th>Price</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>1</td>
                                <td>Pre-Processor</td>
                                <td>Yaml</td>
                                <td>$10</td>
                            </tr>
                        </tbody>
                    </table>
                </td>
            </tr>
            <tr>
                <td>2</td>
                <td>CSS-Basics</td>
                <td>$25</td>
            </tr>
        </tbody>
    </table>
  
</body>
  
</html>


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

Bootstrap 5 Table nesting

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



Last Updated : 24 Nov, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads