[FIXED] PrimeNG table is not taking the fixed width in Angular

Issue

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

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

Solution

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.

Answered By – georgeos

Answer Checked By – Marilyn (Easybugfix Volunteer)

Leave a Reply

(*) Required, Your email will not be published