PrimeNG table is not taking the fixed width in Angular

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%.

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.

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 1

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 , 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 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.

Answer 2

I think the problem is just that your selector for the th element is slightly incorrect. You have:

::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 :

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

Answer 3

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;
}

Answer 4

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]="'100px'"> and <td [style]="'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]="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]="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