CSS 将样式应用于 p:datatable 中的 Header
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10796203/
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
Applying styles to Header in p:datatable
提问by vr3w3c9
I would like to know how to apply the styles for the header column in the primefaces Datatable. I was able to change the styles for the rows using the rowStyleClass attribute. But not sure, how to change the style for the header columns. A sample example would be really helpful. I have tried the below, but the style for the entire column seems to get changed
我想知道如何在 primefaces 数据表中应用标题列的样式。我能够使用 rowStyleClass 属性更改行的样式。但不确定如何更改标题列的样式。示例示例将非常有帮助。我已经尝试了以下，但整个列的样式似乎发生了变化
<p:column id="SelectallID" headerText="Select ID" style="text-align:center; background-color:#C6C3C6;padding:12px;">
<h:outputText>
<h:selectBooleanCheckbox id="checkbox2" value="#{car.selected}"/>
</h:outputText>
</p:column>
when I use the above, the entire column style seems to get changed. But I want to change the style for only the header columns. Please Assist. Thanks in Advance.
当我使用上述内容时，整个列样式似乎都发生了变化。但我只想更改标题列的样式。请协助。提前致谢。
采纳答案by Matt Handy
Primefaces datatable headers generate a html <th>element. You could use an element selector in your style definition:
Primefaces 数据表标题生成一个 html<th>元素。您可以在样式定义中使用元素选择器：
th {
color: red !important;
}
This will for instance change the font color of all <th>elements on the page.
例如，这将更改<th>页面上所有元素的字体颜色。
If this selection is not specific enough for your purposes, you can combine it with the id of the datatable:
如果此选择对于您的目的而言不够具体，您可以将其与数据表的 id 结合使用：
#review-table th {
color: red;
}
回答by eddie
You can target the table header of all <p:dataTable>with the following code:
您可以<p:dataTable>使用以下代码定位所有的表头：
.ui-datatable thead th {
background-image: none !important;
background-color: var(--primary-color) !important;
color: var(--secondary-color) !important;
}
You may need to use !importantto override inherited properties
您可能需要使用!important覆盖继承的属性
EDIT:I agree with @Kukeltje's comment about avoiding the usage of !important, which results in the logic used by the accepted answer.
编辑：我同意@Kukeltje 关于避免使用 的评论!important，这导致已接受答案使用的逻辑。
.reskinned-datatable th {
background-image: none;
background-color: var(--primary-color);
color: var(--secondary-color);
}
回答by druiz
I know this is old but just in case someone else finds it:
我知道这是旧的，但以防万一其他人找到它：
You can create a p:dataTable with a p:columnGroup like this:
您可以像这样使用 ap:columnGroup 创建 ap:dataTable：
<p:dataTable id="example" value="#{bean.values}" var="value">
<p:columnGroup type="header">
<p:column headerText="column1" />
<p:column headerText="column2" styleClass="text-left"/>
<p:column headerText="column3" styleClass="text-left"/>
</p:columnGroup>
<p:column>#{value.val1}</p:column>
<p:column>#{value.val2}</p:column>
<p:column>#{value.val3}</p:column>
</p:dataTable>
The style in the columnGroup will affect the headers <th>and the style in the rest of the columns will affect the <td>
columnGroup 中的样式将影响标题<th>，其余列中的样式将影响<td>
I hope this helps.
我希望这有帮助。
