Change p-column width

Question

I'm in a project where I need to use PrimeNG to do tables and I have a problem with defining the width of the first column.

In my HTML code, I have something like:

<p-datatable styleClass="myTable">
     <p-column>

     </p-column>
     ...
</p-datable>

And in my CSS, I have something like:

.myTable td:nth-child(1) {
    width:300px;
}

Also, I've tried with the following HTML:

 <p-datatable>
     <p-column styleClass="col1">

     </p-column>
     ...
 </p-datable>

And in my CSS:

td.col1 {
    width: 300px;
}

And I also did inspect the code and saw the class of the row which is tr.ui-widget-content ui-datatable-even and tried the following CSS:

tr.ui-widget-content ui-datatable-even td:nth-child(1) {
    width: 500px !important;
}

And nothing seems to work.

Can someone tell me if it's possible to define the width of the column and, if so, how can I do that?

More reading on overriding angular css: https://www.concretepage.com/angular-2/angular-2-4-component-styles-host-host-context-deep-selector-example — Baked Inhalf, Nov 07 '17 at 14:05

score 23 · Answer 1 · answered Sep 05 '16 at 10:15

23

You can define the width manually, try this:

<p-column [style]="{'width':'300px'}" </p-column>

answered Sep 05 '16 at 10:15

David Pascoal

12

still can't quite believe this is the best solution :-/ – Simon_Weaver Dec 14 '16 at 10:35
note: `width` doesn't actually need to be in quotes, but if you're trying to center text then `text-align` must be in quotes `[style]="{width: '180px', 'text-align': 'center'}"` – Simon_Weaver Dec 14 '16 at 10:37
1

This doesn't work well with `[responsive]="true"`. See also http://forum.primefaces.org/viewtopic.php?f=35&t=48355&hilit=column+width – Hendy Irawan Dec 24 '16 at 02:48
how to set width for dynamic columns based on column header name – Eswar May 17 '19 at 10:38

score 3 · Answer 2 · answered May 24 '17 at 19:40

If you are working with angular, you can update css file to change PrimeNg styling with following sample code,

:host /deep/ .ui-datatable{
    width: 500px;
}

2 Answers2