Help Formatting Tabular Datapage: Hiding Gridlines & Coloring Headers

[MarkMayhrai]

Hi everyone,

I'm hoping to get some help with formatting my tabular datapage. Currently, I'd like to achieve the following:

1. Hide Gridlines & Whiten Column Header: I'd prefer a cleaner look without specific gridlines and coloring from specific column headers; making them transparent?
2. Color Specific Column Header: Ideally, I'd also like to set a different background color for a particular column headers to make it stand out.

If anyone has experience with styling tabular datapages and can offer some guidance on how to achieve these changes, I'd greatly appreciate it!

 

 

 

[Volomeister]

Hi @MarkMayhrai

Do you have responsiveness on the DataPage enabled or disabled? 
If it is enabled, you can add the following CSS code snippet to the header of your DataPage:

 

<style>

.cbResultSetTable  tr th:nth-child(column order number) {
background-color: color;
}

</style>

Where the "column order number" represents the column order number. So you need to specify which table header columns must have which background colors in this rule. It will look like this:

<style>

.cbResultSetTable  tr th:nth-child(10), .cbResultSetTable  tr th:nth-child(11) {
background-color: white;
}


.cbResultSetTable  tr th:nth-child(7), .cbResultSetTable  tr th:nth-child(8), .cbResultSetTable  tr th:nth-child(9) {
background-color: blue;
}


</style>

 

[CoopperBackpack]

Hello @MarkMayhrai,

To add, the background color of the header can be applied/changed under the Styles: 
Results page > Table Layout > Header Cells > Background Options > Color

To color specific cells, you need to refer to the number of the column.
For example: 

<style>
/* color the 2nd and 3rd header cell */

form[action*='[@cbAppKey]'] th[class*="cbResultSetHeaderCell"]:nth-child(2),
form[action*='[@cbAppKey]'] th[class*="cbResultSetHeaderCell"]:nth-child(3){
   background-color: #00d5e4;
}

/* chnage the styles of the 4th header cell */

form[action*='[@cbAppKey]'] th[class*="cbResultSetHeaderCell"]:nth-child(4){
  background-color: transparent;
  border: none;
}
</style>

 

[MarkMayhrai]

On 4/1/2024 at 2:43 AM, CoopperBackpack said:

Hello @MarkMayhrai,

To add, the background color of the header can be applied/changed under the Styles: 
Results page > Table Layout > Header Cells > Background Options > Color

To color specific cells, you need to refer to the number of the column.
For example: 

<style>
/* color the 2nd and 3rd header cell */

form[action*='[@cbAppKey]'] th[class*="cbResultSetHeaderCell"]:nth-child(2),
form[action*='[@cbAppKey]'] th[class*="cbResultSetHeaderCell"]:nth-child(3){
   background-color: #00d5e4;
}

/* chnage the styles of the 4th header cell */

form[action*='[@cbAppKey]'] th[class*="cbResultSetHeaderCell"]:nth-child(4){
  background-color: transparent;
  border: none;
}
</style>

Dear CoopperBackpack,

My sincere gratitude for providing the code. It worked flawlessly, and I am incredibly grateful.

Warm regards,

Mark Mayhrai

 

[MarkMayhrai]

On 4/1/2024 at 2:43 AM, CoopperBackpack said:

Hello @MarkMayhrai,

To add, the background color of the header can be applied/changed under the Styles: 
Results page > Table Layout > Header Cells > Background Options > Color

To color specific cells, you need to refer to the number of the column.
For example: 

<style>
/* color the 2nd and 3rd header cell */

form[action*='[@cbAppKey]'] th[class*="cbResultSetHeaderCell"]:nth-child(2),
form[action*='[@cbAppKey]'] th[class*="cbResultSetHeaderCell"]:nth-child(3){
   background-color: #00d5e4;
}

/* chnage the styles of the 4th header cell */

form[action*='[@cbAppKey]'] th[class*="cbResultSetHeaderCell"]:nth-child(4){
  background-color: transparent;
  border: none;
}
</style>

Dear CoopperBackpack,

My sincere gratitude for providing the

On 4/1/2024 at 2:38 AM, Volomeister said:

Hi @MarkMayhrai

Do you have responsiveness on the DataPage enabled or disabled? 
If it is enabled, you can add the following CSS code snippet to the header of your DataPage:

 

<style>

.cbResultSetTable  tr th:nth-child(column order number) {
background-color: color;
}

</style>

Where the "column order number" represents the column order number. So you need to specify which table header columns must have which background colors in this rule. It will look like this:

<style>

.cbResultSetTable  tr th:nth-child(10), .cbResultSetTable  tr th:nth-child(11) {
background-color: white;
}


.cbResultSetTable  tr th:nth-child(7), .cbResultSetTable  tr th:nth-child(8), .cbResultSetTable  tr th:nth-child(9) {
background-color: blue;
}


</style>

 

x

 

On 4/1/2024 at 2:38 AM, Volomeister said:

Hi @MarkMayhrai

Do you have responsiveness on the DataPage enabled or disabled? 
If it is enabled, you can add the following CSS code snippet to the header of your DataPage:

 

<style>

.cbResultSetTable  tr th:nth-child(column order number) {
background-color: color;
}

</style>

Where the "column order number" represents the column order number. So you need to specify which table header columns must have which background colors in this rule. It will look like this:

<style>

.cbResultSetTable  tr th:nth-child(10), .cbResultSetTable  tr th:nth-child(11) {
background-color: white;
}


.cbResultSetTable  tr th:nth-child(7), .cbResultSetTable  tr th:nth-child(8), .cbResultSetTable  tr th:nth-child(9) {
background-color: blue;
}


</style>

 

Hi VoloMeister. Worked perfectly; thank you very much!

Warm regards,

Mark Mayhrai