Question: I am trying to fix the width of the first column in the primeNG table but somehow it is overriding my CSS even though it is showing while inspecting the element.

Basically, I am looking for CSS in which by changing the tab the first column of the table will have a fixed width no matter what is the size of all columns.

I have tried following way by defining fixed width for the first child but it is taking based width:100%.

[![enter image description here](https://i.stack.imgur.com/M1HGZ.png)](https://i.stack.imgur.com/M1HGZ.png)
In the above image, you can see the size is coming as 368 even though it is 100px defined.

Same when I change the tab, the width is coming as 920 even 100px is fixed.

[![enter image description here](https://i.stack.imgur.com/c9tnN.png)](https://i.stack.imgur.com/c9tnN.png)

Is there any way I can define fixed-width 100px with having table width:100% as I don't want to break responsiveness?

Below is reproducible example for reference:

<https://stackblitz.com/edit/primeng-tablescroll-demo-wtpbny>

Answer: 
**In primeng 12 they removed colgroup template so if you are using colgroup over the application need to remove because custom width is not working for column if you are using scrollable check migration guide.**

link:<https://github.com/primefaces/primeng/wiki/Migration-Guide>

solution:
you need to add same width for both tags <th [style]="'width':'100px'"> and <td [style]="'width':'100px'">
if you are using dynamic columns then add one more property width like below

**[{ header: "Name", field: "name", width: '100px' }] // column object array object**

```
<p-table [value]="data" [columns]="ColumnObjectArray">   
<ng-template pTemplate="header" let-columns>
                <tr>
                    <th *ngFor="let col of columns; let idx=index;" class="" 
                           [style]="'width':col.width">{{col.header}}</th>
               </tr>
</ng-template>
<ng-template pTemplate="body" let-data let-columns="columns">
                <tr>
                    <td *ngFor="let col of columns" [style]="'width':col.width">
                       {{data[col.field]}}
                    </td>
                </tr>
</ng-template>
</p-table>

```

**try this one you will definitely get the responsive width to table and also you will get the custom column and header width**
I think the problem is just that your selector for the `th` element is slightly incorrect. You have:

```css
::ng-deep .p-datatable .p-datatable-tbody > tr > th:nth-child(1) {

```

but you just need to use `.p-datatable-thead` instead of `.p-datatable-tbody`:

```css
::ng-deep .p-datatable .p-datatable-thead > tr > th:nth-child(1) {

```