9

我想知道如何在 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>

当我使用上述内容时，整个列样式似乎都发生了变化。但我只想更改标题列的样式。请协助。提前致谢。

4

3 回答 3

11

Primefaces datatable headers generate a html <th> element. You could use an element selector in your style definition:

th {
  color: red !important;
}

This will for instance change the font color of all <th> elements on the page.

If this selection is not specific enough for your purposes, you can combine it with the id of the datatable:

#review-table th {
  color: red;
}
于 2012-05-29T11:18:04.940 回答
2

我知道这是旧的，但以防万一其他人发现它：

您可以像这样使用 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>

columnGroup 中的样式将影响标题<th>，其余列中的样式将影响<td>

我希望这有帮助。

于 2017-06-15T01:11:37.043 回答
2

<p:dataTable>您可以使用以下代码定位 all 的表头：

.ui-datatable thead th {
    background-image: none !important;
    background-color: var(--primary-color) !important;
    color: var(--secondary-color) !important;
}

您可能需要使用!important来覆盖继承的属性

编辑：我同意@Kukeltje 关于避免使用的评论!important，这导致接受的答案使用的逻辑。

.reskinned-datatable th {
    background-image: none;
    background-color: var(--primary-color);
    color: var(--secondary-color);
}
于 2018-08-01T10:29:53.477 回答