Add style to specific columns or rows in your Table app

Your use cases or needs require to style specific columns or rows (or its contents). With the Table visualization type, you can display them in a certain way. In this article, you’ll learn simple CSS tricks to personalize your columns and rows.

If you want to apply a style to a specific column or row (but not on others), use :nth-child() property from CSS3. This selector is used to apply a style to the element number ‘n’ inside a parent element.

You can use :nth-child() in several ways:

• :nth-child(3) - use a number as a parameter to specify a style for the third element (for example).
• :nth-child(odd) or :nth-child(even) - use 'odd' or 'even' as a parameter to specify style for all odd or even elements.
• :nth-child(4n) - use a 'number n' as a parameter to specify the style to every 4th cycle of the element (for example, highlight the table's 4th row in red, then the next 4th row after,  and so on).

To add style to specific columns, use the following selector in your CSS:

1
2
3

tbody>tr>:nth-child(your_parameter){ 
/* your css here */
}

Here is a simple example (changing the font color, the alignment and the width of the second column): 

Copy this template

1
2
3
4
5

tbody>tr>:nth-child(2){
 color:red;
 width:200px;
 text-align:center;
}

To add style to specific columns, use the following selector in your CSS:

1
2
3

tbody>:nth-child(your_parameter){ 
/* your css here */
}

Here is a simple example (changing the font color and the font size of the second row): 

Copy this template

1
2
3

tbody>:nth-child(2){
 color:red; 
 font-weight: bold;
}