In this article you will learn about how to do Row Banding for a tabular report. Initially, login to the Helical Insight with the required credentials. Then, you will need to open an existing tabular report or create another tabular report using your data wherein you want row banding.
On opening a tabular report where you can see the default view of a Table.
There are following ways you can show row banding which are :
- Odd Row Banding
- Even Row Banding
- Odd-Even Row Banding
To view row band, you will require a CSS code. For each pattern a different CSS Code is required. Also, to execute CSS code go to Custom Tab, click on Styles to enter the code and then click on Apply to execute the entered code.
CSS Code : ( Odd Row Banding)
.table > tbody > tr:nth-child(2n+1)> td,
.table-sticky.table-striped > tbody > tr:nth-of-type(2n+1)> td{
background-color: palegreen; // Color can be customizable
}
Output
CSS Code : ( Even Row Banding)
.table > tbody > tr:nth-child(2n)>td, .table-sticky.table-striped > tbody > tr:nth-of-type(2n)> td { background-color: moccasin;
// Color can be customizable
}
Output
CSS Code : ( Odd-Even Row Banding)
.table > tbody > tr:nth-child(2n+1)> td,
.table-sticky.table-striped > tbody > tr:nth-of-type(2n+1)> td{
background-color: palegreen; // Color can be customizable
}
.table > tbody > tr:nth-child(2n)>td, .table-sticky.table-striped > tbody > tr:nth-of-type(2n)> td { background-color: moccasin;
// Color can be customizable
}
Output
Also, you can add more CSS and Javascript code for more customization.
For more info, contact us at support@helicalinsight.com