How to style Vertical Zebra-Striped Table in Bootstrap 5 ?
Last Updated :
19 Feb, 2024
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:
Using SASS/SCSS:
This method involves using SASS/SCSS to customize the default Bootstrap styling.
Firstly, create a styles.scss file with the code below.
// styles.scss
// Custom styles for zebra-striping
.table-striped-columns {
tbody {
td {
&:nth-child(odd) {
background-color: lightblue;
}
}
}
}
then, compile the file to styles.css with the below command and add it as the link to the HTML
sass styles.scss styles.css
Example: Illustration of the styling of the vertical zebra-striped table in Bootstrap 5
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link href=
rel="stylesheet" integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
<link rel="stylesheet" href="main.css">
<title>Styling vertical zebra-striped table</title>
</head>
<body>
<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>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John Doe</td>
<td>25</td>
</tr>
<tr>
<td>2</td>
<td>Jane Doe</td>
<td>30</td>
</tr>
</tbody>
</table>
</div>
<script src=
integrity=
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous">
</script>
</body>
</html>
|
Output:
The nth-child Selector
This method involves directly using the nth-child selector to apply styles. The class .table-striped-columns :nth-child(odd): This CSS rule applies zebra-striping to every odd column of the table body. :nth-child(odd) is a CSS pseudo-class selector that matches elements based on their position in a group of siblings. Here, it’s targeting odd-numbered <tr> elements inside .table-striped-columns. The .table-striped-columns class is applied to the <table> element to specify that zebra-striping should be applied to its columns.
Syntax:
.table-striped-vertical :nth-child(odd)
{
// Specify the background color for odd rows
background-color: lightblue;
}
Example: Illustration of style vertical zebra-striped table in Bootstrap 5 using nth-child Selector.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link href=
rel="stylesheet">
<title>Zebra-Striped Table</title>
<style>
table {
border-collapse: collapse;
border-spacing: 0;
width: 100%;
border: 1px solid #ddd;
}
th,
td {
text-align: left;
padding: 16px;
}
.table-striped-columns :nth-child(odd) {
background-color: lightblue;
}
</style>
</head>
<body>
<div class="topic text-success fs-3 text-center my-2">
Vertical zebra-striped table using nth-child Selector
</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>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John Doe</td>
<td>25</td>
</tr>
<tr>
<td>2</td>
<td>Jane Doe</td>
<td>30</td>
</tr>
</tbody>
</table>
</div>
<script src=
</script>
</body>
</html>
|
Output:
Output
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=
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=
</script>
</body>
</html>
|
Output:
Output
Share your thoughts in the comments
Please Login to comment...