Bootstrap Utility table-striped

To achieve the vertical zebra-striped table, add the class container to the Div tag and add the class table and table-striped columns to the Table tag.

Syntax:

<table class="table table-striped-columns">

Example: The illustration of the vertical zebra-striped table in Bootstrap 5 using table-striped-columns.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1">
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
          rel="stylesheet">
    <title>Zebra-Striped Table</title>
</head>
 
<body>
    <div class="t text-success fs-3 text-center">
      Zebra-Striped Table using Bootstrap Utilities
      </div>
 
    <div class="container">
        <table class="table table-striped-columns">
            <thead>
                <tr>
                    <th scope="col">ID</th>
                    <th scope="col">Name</th>
                    <th scope="col">Age</th>
                    <th scope="col">Address</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>Shivani</td>
                    <td>25</td>
                    <td>Noida</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>Mahima</td>
                    <td>30</td>
                    <td>Noida</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>Kanha</td>
                    <td>30</td>
                    <td>Noida</td>
                </tr>
            </tbody>
        </table>
    </div>
 
    <script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js">
      </script>
</body>
 
</html>

Output:

Output

How to style Vertical Zebra-Striped Table in Bootstrap 5 ?

A Table where columns have two alternating colors enhances the readability of tables by providing a clear visual separation between columns. In Bootstrap 5, creating a vertically zebra-striped table can be achieved in several ways. This article will cover three different methods:

Table of Content