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
Last Updated :
09 Dec, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...