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 = "https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" 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 > <!-- Add more rows as needed --> </ tbody > </ table > </ div > < script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" > </ script > </ body > </ html > |
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
- Using SASS/SCSS
- The nth-child Selector
- Bootstrap Utility table-striped