PrimeNg change p-column width

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-виджет-контента UI-DataTable даже и попробовал 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

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

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

Для получения информации о Shadow DOM см https://blog.thoughtram.io/angular/2015/06/29/shadow-dom-strategies-in-angular2.html