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.
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
Share your thoughts in the comments
Please Login to comment...