How to style Horizontal Zebra-Striped Table in Bootstrap 5?
Last Updated :
19 Feb, 2024
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.
Syntax:
<table class="table table-striped">
//table Data
</table>
Horizontal Zebra-Striped Table with dark-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.
- Apply CSS rules for styling such as colours, borders, and padding to achieve the desired appearance.
- Optionally, incorporate Bootstrap classes like ‘table’, ‘table-striped’, ‘table-dark’, and ‘table-responsive’ for enhanced styling and responsiveness.
- For better styling design with additional CSS for font size, alignment, or spacing as needed.
Example: Implementation to style horizontal zebra-striped table.
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 Example</title>
<link href=
rel="stylesheet">
</head>
<body>
<div class="container d-flex justify-content-center my-4">
<h2 class="text-success">
Horizontal Zebra-Striped Table
</h2>
</div>
<div class="container">
<div class="table-responsive mt-4">
<table class="table table-dark table-striped">
<thead>
<tr>
<th>#</th>
<th>Course</th>
<th>Price</th>
<th>Enrollment Date</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Web Development Bootcamp</td>
<td>15500</td>
<td>2024-01-15</td>
</tr>
<tr>
<td>2</td>
<td>Data Science Fundamentals</td>
<td>12600</td>
<td>2024-02-01</td>
</tr>
<tr>
<td>3</td>
<td>Mobile App Development Course</td>
<td>18000</td>
<td>2024-02-10</td>
</tr>
<tr>
<td>4</td>
<td>UX/UI Design Workshop</td>
<td>100000</td>
<td>2024-02-20</td>
</tr>
</tbody>
</table>
</div>
</div>
<script src=
</script>
</body>
</html>
|
Output:
output
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-5 for margin top, mb-4 for margin bottom, and table, table-striped for 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>
<link href=
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>
<script src=
</script>
</body>
</html>
|
Output:
Share your thoughts in the comments
Please Login to comment...