Hi all,
I have a table component, where I changed the background color manually, but the white background I highlighted still shows up. What exactly do I need to do to get rid of this bar ?
Thank you.
It might be because the styling is on the header of each column rather than the parent header row of the table.
Make sure at at least one of your columns is set to grow to occupy the unused space (not strictWidth).
1 Like
Changing strictwidth to Off for one column did fix it. Is there a way to change style on parent header row ?
I'm not sure that there is a way within the usual property editor. Someone may be able to correct me on this.
However, the header colour comes from the theme (i.e. light.css), so you can either update it there, or you can override the theme using the custom stylesheet:
ia_table__headContainer,
.ia_table__footContainer {
background-color: red !important;
}
This will apply to all tables in your project. If you want to limit it to certain tables, create a dummy style class (i.e. styledTable) and it to your table(s):
Then update your custom stylesheet like so. Note the psc prefix for the style class
.psc-styledTable .ia_table__headContainer,
.ia_table__footContainer {
background-color: red !important;
}
As a side note, the browser developer tools (F12 in Edge and Chrome) are really good for identifying how components are getting their styles:
