Horizontal Zebra-Striped Table with light-mode
- Create HTML structure by using <table> for the table container, <thead> for the table header, <tbody> for the table body, and <tr> for table rows.
- Applies Bootstrap classes like
container,mt-5for margin top,mb-4for margin bottom, andtable,table-stripedfor zebra-striping. - Adds a custom CSS style to stripe the table rows with a light background color using nth-child selector.
- Populates the table with data including ID, Name, and Level for each row.
- Ensures responsiveness by utilizing Bootstrap’s grid system and responsive classes.
Example 2: Implementation to style horizontal zebra-striped table using nth selector.
HTML
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Zebra-Striped Table with Bootstrap 5</title> <!-- Bootstrap CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"> <style> .table-striped tbody tr:nth-child(odd) { background-color: #f2f2f2; } </style></head><body> <div class="container mt-5"> <h2 class="mb-4">Zebra-Striped Table</h2> <table class="table table-striped"> <thead> <tr> <th>ID</th> <th>Name</th> <th>Level</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>REACTJS</td> <td>Expert</td> </tr> <tr> <td>2</td> <td>MongoDB</td> <td>Intermediate</td> </tr> <tr> <td>3</td> <td>NextJS</td> <td>Intermediate</td> </tr> </tbody> </table> </div> <!-- Bootstrap JS --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"> </script></body></html> |
Output:
How to style Horizontal Zebra-Striped Table in Bootstrap 5?
A zebra-striped table is a table that has alternating shaded rows to provide visual distinction between rows and make the table easier to read and understand. This is commonly used in tables with a large number of rows.
Note: To create a zebra-striped table, use the nth-child() selector and add a background color to all even (or odd) table rows.