In this article you will learn about how to do column banding in table. Initially, you will need to open an existing tabular report or create another tabular report using your data wherein you want column banding.
Default view of a Table :
Column Banding Patterns in Table :
- Odd Column Banding
- Even Column Banding
- Odd-Even Column Banding
To apply a column banding pattern you will require CSS code.
Also, to execute CSS code, go to Custom Tab, click on Style then paste the code and click apply.
CSS Code : ( Odd Column Banding )
.table > tbody > tr > td:nth-child(2n+1),
.table > thead > tr > th:nth-child(2n+1) {
background-color: palegreen; // for defining color also you can use hex code (#DD00FE)
}
Output :
CSS Code : ( Even Column Banding )
.table > tbody > tr > td:nth-child(2n), .table > thead > tr > th:nth-child(2n) { background-color: moccasin; // for defining color also you can use hex code (#DD00FE) }
Output :
CSS Code : ( Odd-Even Column Banding )
.table > tbody > tr > td:nth-child(2n+1), .table > thead > tr > th:nth-child(2n+1) { background-color: palegreen; // can be customized } .table > tbody > tr > td:nth-child(2n), .table > thead > tr > th:nth-child(2n) { background-color: moccasin; // can be customized }
Output :
Similarly, in addition you can use other CSS and Javascripts code for more customization.
For more info, contact us at support@helicalinsight.com