CSS 更改 p 列宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/39172585/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Change p-column width
提问by Daniel Serr?o
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.
我在一个需要使用 PrimeNG 来做表格的项目中，我在定义第一列的宽度时遇到了问题。
In my HTML code, I have something like:
在我的 HTML 代码中，我有类似的内容：
<p-datatable styleClass="myTable">
<p-column>
</p-column>
...
</p-datable>
And in my CSS, I have something like:
在我的 CSS 中，我有类似的东西：
.myTable td:nth-child(1) {
width:300px;
}
Also, I've tried with the following HTML:
另外，我尝试过以下 HTML：
<p-datatable>
<p-column styleClass="col1">
</p-column>
...
</p-datable>
And in my CSS:
在我的 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-evenand tried the following CSS:
我也确实检查了代码并看到了行的类，tr.ui-widget-content ui-datatable-even并尝试了以下 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?
有人可以告诉我是否可以定义列的宽度，如果可以，我该怎么做？
回答by David Pascoal
You can define the width manually, try this:
您可以手动定义宽度，试试这个：
<p-column [style]="{'width':'300px'}" </p-column>
回答by Karan2020
If you are working with angular, you can update css file to change PrimeNg styling with following sample code,
如果您正在使用 angular，则可以使用以下示例代码更新 css 文件以更改 PrimeNg 样式，
: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
关于 Shadow DOM 的信息，请参考https://blog.thoughtram.io/angular/2015/06/29/shadow-dom-strategies-in-angular2.html
