How to apply red color font to specific column for dynamic data?

How to apply red color font to specific column for dynamic data?
0

I work on angular 7 app I need to apply red color font to specific column

but i dont know how to do that ?

I show data dynamically meaning no fixed column or data and code below working without any issue

my main thing i need is if columnname=‘onlineurl’ make font color to red

my code as below datasource on ts as below :

this._displayreport.GetReportDetailsPaging(this.searchData).subscribe((data: any[]) => {  

       this.reportdetailslist = data;  

       this.headerCols = Object.keys(data[0]);  

       data.forEach((item) =>{  
         let values = Object.keys(item).map((key)=> item[key]).filter(item =>item != data[0].totalCount)  

         this.contentBody.push(values);  


  });  


     });

to get header without data i do as below :

<thead style="width: max-content">    
         <tr>    
           <th  *ngFor="let coln of headerCols">    
             <ng-container *ngIf="coln != 'totalCount'">    

               {{coln}}    
             </ng-container>    
           </th> 
 </tr>    


         </tr>   
</thead>

to get content data without header i do

<tr *ngFor="let rep of contentBody">    

                <td *ngFor="let r1 of rep"><span>{{r1}}</span></td>    

                <td
</tr>

Hey,
I think the <col> element is what you are looking for.
Insert it for as many columns as you have before the table head like this:

<table>
  <colgroup>
    <col class="red" />
    <col  />
    <col  />
  </colgroup>
  <thead>

and give the class “red” in css this

.red {
  color: red;
}

then you should be set.

Hope this helps, good luck!

Edit: Since you don’t have static html or css, you can call and add the class in the function for your table content.