How to add table header background color?
Question

I have a problem . I want to add background color of table header row (not from editable table) .Can someone help me?

I use this bg_color for the whole system. I attached image. Please help!


Q.PNG

Hi Ei,

you sound like a beginner, so both above solutions will probably be enough for you to handle right now, but if you will later on work in real projects, things tend to get complex and unmaintainable quickly, so I would suggest to always try to stick to the following guidelines :

1 avoid inline styles if possible

2 avoid use of !important if possible


A typical way to do this

1 inspect your running webpage with browser tools

2 find the exact CSS selector that is responsible for the property you would like to change

3 If you are ok with applying the change to all your table headers, define that exact same CSS selector, and add the properties you want changed 

4 If you want to apply the change only to specific elements, define a new class and give your chosen elements that class


In your example

If you want all table headers in your module ( or screen) to have that same background color, just match the same selector in your module ( or screen) CSS


If you only put .TableRecords_Header in your CSS selector, it will have no effect because it is less specific than the already existing selector in the base theme

A quick fix, but to be avoided if possible, is to add !important.  If used a lot, this leads to unpredictable outcomes.


If you want only one specific table to have a different colored header, you will have to define a new class and attach that class to the header row


In this case, when you have several selectors with the same specificity, be carefull about the sequence in which you define them, as the last one is applicable.  So this won't work to turn one specific table header palevioletred, because the CSS was defined too early :


I have attached an oml demonstrating this.

Dorine

QDTHeaderCSS.oml

Thank you so much! It works .

Have a great day!


Hi Ei Yadanar Moe Min,

You can add the below css

.TableRecords_Header{
    background-color: bisque !important;
} 

Hope this helps!

Regards,

Ellakkiiya.S

Hi,

You need to add color to header cell like this, style: "background-color:red"

Hope this helps,

Kind Reagrds,


Hi Ei,

you sound like a beginner, so both above solutions will probably be enough for you to handle right now, but if you will later on work in real projects, things tend to get complex and unmaintainable quickly, so I would suggest to always try to stick to the following guidelines :

1 avoid inline styles if possible

2 avoid use of !important if possible


A typical way to do this

1 inspect your running webpage with browser tools

2 find the exact CSS selector that is responsible for the property you would like to change

3 If you are ok with applying the change to all your table headers, define that exact same CSS selector, and add the properties you want changed 

4 If you want to apply the change only to specific elements, define a new class and give your chosen elements that class


In your example

If you want all table headers in your module ( or screen) to have that same background color, just match the same selector in your module ( or screen) CSS


If you only put .TableRecords_Header in your CSS selector, it will have no effect because it is less specific than the already existing selector in the base theme

A quick fix, but to be avoided if possible, is to add !important.  If used a lot, this leads to unpredictable outcomes.


If you want only one specific table to have a different colored header, you will have to define a new class and attach that class to the header row


In this case, when you have several selectors with the same specificity, be carefull about the sequence in which you define them, as the last one is applicable.  So this won't work to turn one specific table header palevioletred, because the CSS was defined too early :


I have attached an oml demonstrating this.

Dorine

QDTHeaderCSS.oml

Thank you so much! It works .

Have a great day!


Hi Ei Yadanar Moe Min

Apply this CSS to Screen to see desired Change.

.table-header th {
    background-color: red;
   }

Thanks and Regards,

Akshay Deshpande.

yes exactly,

that would be the correct solution in case of reactive.

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.