CODEWITHSUNDEEP
htmlcssangularangular-material-table
Fazla Elahi Md Jubayer
Fazla Elahi Md Jubayer

Reputation: 309

How do I align content to right of a Angular Material table specific column header

In my mat-table I want to apply different styling on some specific column headers. In some of my columns headers I want content should be aligned right by using text-align: right. So the CSS i have now:

th.mat-header-cell {
    text-align: right; 
}

The above code align all headers content of the table to the right, but I want only specific headers column headers to the right not all. One of the solution i found is below:

th.mat-header-cell:nth-child(3), th.mat-header-cell:nth-child(5){
  text-align: right; 
}

It works but problem with this solution is that if I add one more column i need to keep change my CSS code as well, which is very static way of doing this. Is there any way I can access the specific table header in CSS by the name of the ng-container. For example my ng-container is like below:

<!-- Position Column -->
<ng-container matColumnDef="position">
  <th mat-header-cell *matHeaderCellDef> No. </th>
  <td mat-cell *matCellDef="let element"> {{element.position}} </td>
</ng-container>

So for this above ng-container I want to access the table header like below:

th.mat-header-cell['position'] {
  text-align: right;
}

The above code is just my pseudocode, I want similar this kind of solution where I can access table headers using the ng-container name or table header name if there any existed solution already. How can I achieve this?

Upvotes: 0

Views: 2146

Answers (1)

Roshinie Jayasundara
Roshinie Jayasundara

Reputation: 307

To identify this 'position' column header

<!-- Position Column -->
<ng-container matColumnDef="position">
  <th mat-header-cell *matHeaderCellDef> No. </th>
  <td mat-cell *matCellDef="let element"> {{element.position}} </td>
</ng-container>

You can use the CSS selector as shown below

.mat-column-position.mat-header-cell {
    text-align: right; 
}

Note: If you want to style the entire column

.mat-column-position {
     text-align: right; 
}

Upvotes: 3

Related Questions