Bootstrap 5 Tables without borders
Bootstrap5 Tables without borders is used to create a table in borderless form. It is mostly used when we do not want to show the separation in the table content.
Tables without Borders Class:
- table-borderless: This class is used to create borderless tables
Syntax:
<table class="table table-borderless">
...
</table>
Example 1: In this example, we will show Tables without borders using the class .table-borderless.
HTML
<!DOCTYPE html><html> <head> <link href= rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <title>Tables without borders</title></head> <body> <div class="col-5 container text-center"> <h1 class="text-success"> GeeksforGeeks </h1> <h2> Bootstrap 5 Tables without borders </h2> <table class="table table-borderless"> <thead> <tr> <th>Object</th> <th>Type</th> </tr> </thead> <tbody> <tr> <td>Erazer</td> <td>Non Living</td> </tr> <tr> <td>Plants</td> <td>Living</td> </tr> <tr> <td>Humans</td> <td>Living</td> </tr> <tr> <td>Pencil</td> <td> Non Living</td> </tr> <tr> <td>Sharpener</td> <td> Non Living</td> </tr> </tbody> </table> </div></body> </html> |
Output:
Example 2: In this example, we will show Tables without borders on dark background.
HTML
<!DOCTYPE html><html> <head> <link href= rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <title>Tables without borders</title> </head> <body> <div class="col-5 container text-center"> <h1 class="text-success"> GeeksforGeeks </h1> <h2> Bootstrap 5 Tables without borders </h2> <table class="table table-borderless table-dark"> <thead> <tr> <th>Object</th> <th>Type</th> </tr> </thead> <tbody> <tr> <td>Erazer</td> <td>Non Living</td> </tr> <tr> <td>Plants</td> <td>Living</td> </tr> <tr> <td>Humans</td> <td>Living</td> </tr> <tr> <td>Pencil</td> <td> Non Living</td> </tr> <tr> <td>Sharpener</td> <td> Non Living</td> </tr> </tbody> </table> </div></body> </html> |
Output:
Reference: https://getbootstrap.com/docs/5.0/content/tables/#tables-without-borders
Please Login to comment...