PrimeNg изменить ширину p-столбца

Question

Я нахожусь в проекте, где мне нужно использовать PrimeNg для создания таблиц, и у меня проблема с определением ширины первого столбца.

В моем HTML-коде у меня есть что-то вроде:

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

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

И в моем CSS у меня есть кое-что:

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

Также пробовал со следующим HTML:

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

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

И в моем CSS:

td.col1 {
    width: 300px;
}

Я также проверил код и увидел класс строки tr.ui-widget-content ui-datatable-even и попробовал CSS.

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

И, кажется, ничего не работает. Кто-нибудь может сказать мне, если возможно определить ширину столбца и если утвердительно, как я могу это сделать?

Спасибо за любые ответы...

Answer 1

Вы можете определить ширину вручную, попробуйте это:

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

Answer 2

Если вы работаете с Angular, вы можете обновить CSS-файл, чтобы изменить стиль PrimeNg, используя следующий пример кода:

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

Информацию о Shadow DOM см. По https://blog.thoughtram.io/angular/2015/06/29/shadow-dom-strategies-in-angular2.html