更改 p 列宽度答案

【问题标题】：Change p-column width更改 p 列宽度
【发布时间】：2017-01-03 11:56:31
【问题描述】：

我在一个项目中，我需要使用 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;
}

似乎没有任何效果。

谁能告诉我是否可以定义列的宽度，如果可以，我该怎么做？

【问题讨论】：

【解决方案1】：

你可以手动定义宽度，试试这个：

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

【讨论】：

仍然不敢相信这是最好的解决方案：-/
注意：width 实际上不需要用引号括起来，但如果你想使文本居中，那么 text-align 必须用引号括起来 [style]="{width: '180px', 'text-align': 'center'}"
这不适用于[responsive]="true"。另见forum.primefaces.org/…
如何根据列标题名称设置动态列的宽度

【解决方案2】：

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

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

【讨论】：