Open In App

Bootstrap 5 Tables without borders

Improve
Improve
Like Article
Like
Save
Share
Report

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
Previous
Next
Share your thoughts in the comments
Similar Reads