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?

Answer 1

You can define the width manually, try this:

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

Answer 2

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

For information on Shadow DOM, please refer https://blog.thoughtram.io/angular/2015/06/29/shadow-dom-strategies-in-angular2.html