改变p列宽度

时间:2016-08-26 18:25:05

标签: css width primeng

我正处于一个需要使用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;
}

似乎没有任何效果。

有人可以告诉我是否可以定义列的宽度,如果可以,我该怎么做?

2 个答案:

答案 0 :(得分:23)

您可以手动定义宽度,请尝试以下操作:

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

答案 1 :(得分:4)

如果您正在使用angular,可以使用以下示例代码更新css文件以更改PrimeNg样式,

IPAddress

有关Shadow DOM的信息,请参阅https://blog.thoughtram.io/angular/2015/06/29/shadow-dom-strategies-in-angular2.html