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: 
I've the solution required in one of my projects.

You should perform these steps:

1. Set a width for your desired columns
2. Set the horizontal scroll as per primeng [documentation](https://www.primefaces.org/primeng/showcase/#/table), in Horizontal Scroll section:

> 
> Horizontal Scroll:
> In horizontal scrolling, it is required to give fixed widths to columns. In general when customizing the column widths of scrollable tables, use colgroup as below to avoid misalignment issues as it will apply both the header, body and footer sections which are different separate elements internally.
> 
> 
> 

Here is a live [example](https://stackblitz.com/edit/primeng-tablescroll-fixedcolumn?file=src/app/app.component.html) including a fixed size only for first column and a responsive table.

This is the only solution (setting a fixed size for your table) because if you set the width to 100% in a mobile device, probably not all columns will be displayed or will be overlapped, breaking responsiveness.
This should fix. Removing fixed with for all th elements.
Add this to your style.css

```
.p-datatable .p-datatable-thead > tr > th {
    width: inherit !important;
}

```