function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Matyas CsabaMatyas Csaba 

Lightning:datatable formatting column header

Hello helpers

I  have a Lightning :datatable  where I  would   like  to  add some formatting
I am not able to  set a background color  to  the table  column headers
I was able  to set the color of the font  for the header but  no background

any idea  why  the  below  code  is  nto  working?
I  hightlighted  with  bold  background color  settig code

I  wrapped the Ligthning:datatable  with a  <div>  having id="dt1" 

<head>
<style>

#dt1 
{
    border: 1px solid #ddd;
    border-collapse: collapse;
    width: 100%;
}

#dt1 td
{
    border: 1px solid #ddd;
    padding: 8px;
}

#dt1 tr:nth-child(even){background-color: #f2f2f2;}

#dt1 tr:hover {background-color: #ddd;}

#dt1 table thead th 
{   
   color: blue;
   font-weight:bold;
   background-color: #66ccff;
   border: 1px solid #ddd;
}

</style>
</head>

            <div id="dt1">

            <lightning:datatable data="{!v.mydataLst}" 
          ....
            </lightning:datatable> 

            </div>
Best Answer chosen by Matyas Csaba
sfdcMonkey.comsfdcMonkey.com
add new CSS in style tag :  
 
#dt1 table thead th > span {   
   background-color: #66ccff;
}

note : you can not use <style> tag in API 42,  so try to move your CSS in STYLE tab in lightning component 
Thanks  let us know if it helps you and close your query if you got your answer 

 

All Answers

sfdcMonkey.comsfdcMonkey.com
add new CSS in style tag :  
 
#dt1 table thead th > span {   
   background-color: #66ccff;
}

note : you can not use <style> tag in API 42,  so try to move your CSS in STYLE tab in lightning component 
Thanks  let us know if it helps you and close your query if you got your answer 

 
This was selected as the best answer
Matyas CsabaMatyas Csaba
Thanks for the  answer