MarkMayhrai Posted March 30 Report Share Posted March 30 Hi everyone, I'm hoping to get some help with formatting my tabular datapage. Currently, I'd like to achieve the following: Hide Gridlines & Whiten Column Header: I'd prefer a cleaner look without specific gridlines and coloring from specific column headers; making them transparent? 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! Quote Link to comment Share on other sites More sharing options...
Volomeister Posted April 1 Report Share Posted April 1 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> MarkMayhrai 1 Quote Link to comment Share on other sites More sharing options...
CoopperBackpack Posted April 1 Report Share Posted April 1 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 1 Quote Link to comment Share on other sites More sharing options...
MarkMayhrai Posted April 3 Author Report Share Posted April 3 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 Quote Link to comment Share on other sites More sharing options...
MarkMayhrai Posted April 3 Author Report Share Posted April 3 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 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.