Question

我想知道如何在primefaces Datatable中应用标题列的样式。我能够使用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>

当我使用上面的内容时，整个列样式似乎都发生了变化。但我想只更改标题列的样式。请协助。在此先感谢。

Answer 1

Primefaces数据表头文件生成一个html <th>元素。您可以在样式定义中使用元素选择器：

th {
  color: red !important;
}

例如，这将更改页面上所有<th>元素的字体颜色。

如果此选择不够具体，您可以将其与数据表的ID结合使用：

#review-table th {
  color: red;
}

Answer 2

我知道这已经过时了，以防其他人发现它：

您可以使用p：columnGroup创建一个p：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>

我希望这会有所帮助。

Answer 3

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

.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);
}

将样式应用于p：datatable中的Header

3 个答案: