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=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
          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=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
          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

Bootstrap 5 Tables without borders

Explore