Left spacing for the column headers and the contents of a table
I've a table whose source is an RD. I've created two formats in skin i.e., one is a new container format and the other one is a table format. I've selected the option 'Enable row banding options (zebra striping)' for the table format I've created for creating odd and even rows in the table. I could see that there is no left spacing for the column headers and also the contents of the table as shown in the first screenshot in the attached screen word file. In the first screenshot, could see there is no left space for the column header 'Color' and also the row contents. They are aligned to left. I need to give some left space like as shown in the second screenshot. Also, Please let me know how can I make sure the contents of the rows placed below the column headers like as shown in the second screenshot.
I've tried to give some left space for the both the contents of the rows and headers by adding 'Padding-left' under 'additional styles' for the text in both odd and even rows in Row tab and also the under the 'Column headings' tab -> 'Column and row heading' -> 'Text' -> 'Additional Styles' respectively. But, it didn't help.
This can be achieved using Pega OOTB helper classes. Open the properties panel of the 1st column header "color" and go to presentation Tab. Under advanced, add the left padding as shown in the uploaded screenshot. padding-l-1x means padding-left:7px, padding-l-2x means padding-left:14px. Similarly add padding for the first column content. Hope this helps.