Change p-column width

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?

Answers


You can define the width manually, try this:

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

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


Need Your Help

Add buttons to a listactivity

android layout button listactivity

I have a layout for a ListActivity. To modify the list I have used menu-options. But to remove a couple of "clicks" on the screen I'd like to add two buttons in the button of the screen that is alw...

Is Google Play Store supported in avd emulators?

android google-play avd

After googling quite a bit I am unable to find the answer to this question. Is google play store officially support in avd emulators.