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

Posted 2023-02-23

【中文标题】将样式应用于 p:datatable 中的 Header

【英文标题】：Applying styles to Header in p:datatable

【发布时间】：2012-06-03 12:04:03

【问题描述】：

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

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

【问题讨论】：

“标题栏”？你不是说“列标题”吗？

嗨 BalusC 感谢您的回复。是的，我的意思是列标题

【参考方案1】：

您可以使用以下代码定位所有<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);

【讨论】：

“您可能需要使用 !important 来覆盖继承的属性” 最好使用更具体的选择器，例如向数据表添加显式类。 !important 应尽可能避免

【参考方案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>

我希望这会有所帮助。

【参考方案3】：

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

th 
  color: red !important;

这将改变页面上所有<th>元素的字体颜色。

如果此选择对于您的目的不够具体，您可以将其与数据表的 id 结合起来：

#review-table th 
  color: red;

【讨论】：

感谢您的响应。如指定，我在我的代码中包含以下样式。但是样式并未应用于标题。其中 review-table 是 p:datatable 的 id。 .review-table th text-align:center;背景颜色：#85C2FF；边框底部：1px 实心；填充：12px；非常感谢您对此的帮助。谢谢

id 选择器以# 开头，而不是以点开头。更新了我的答案。

嗨，马特，感谢您的回复。我用 # 更改了 id 选择器，但样式仍然没有应用于标题:(。不确定我是否做错了什么

在浏览器中检查源代码以获取正确的 ID。也许你周围有一个 NamingContainer，那么 id 将类似于 someID:review-table。 CSS 需要完整的 id 来识别正确的组件。 （或者你需要一个不同的选择器）。请注意，冒号 : 需要用反斜杠转义，例如someID\:review-table

非常感谢马特的快速响应。我还可以通过指定命名容器的名称来将样式应用于标题。 #form\:review-table.mystyle th text-align:center;背景颜色：#9CD7F7;显示：表格单元格；垂直对齐：继承；样式仅适用于 headerText 而不是整个列。不知道为什么。我尝试使用 chrome 进行调试，它为角色 =“columnheader”采用默认样式类“ui-state-default”。一旦我尝试在浏览器中更改样式类