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...