Применение стилей к заголовку в p: datatable

Я хотел бы знать, как применить стили для столбца заголовка в Datatable 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>

когда я использую выше, весь стиль столбца, кажется, переодеваться. Но я хочу изменить стиль только для колонок. Пожалуйста Помогите. Спасибо заранее.

7
css jsf jsf-2 primefaces

3 ответов

заголовки Primefaces datatable генерируют html <th> элемент. В определении стиля можно использовать селектор элементов:

th {
  color: red !important;
}

это, например, изменит цвет шрифта всех <th> элементы на странице.

если этот выбор недостаточно специфичен для ваших целей, вы можете объединить его с идентификатором datatable:

#review-table th {
  color: red;
}
8

Я знаю, что это старый, но на всякий случай, если кто-то еще найдет его:

вы можете создать p: dataTable с P: columnGroup следующим образом:

<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>

надеюсь, это поможет.

1

вы можете нацелиться на заголовок таблицы all <p:dataTable> следующий код:

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

возможно, Вам придется использовать !important переопределить унаследованные свойства

EDIT: Я согласен с комментарием @Kukeltje об избежании использования !important, что приводит к логике, используемой принятым ответом.

.reskinned-datatable th {
    background-image: none;
    background-color: var(--primary-color);
    color: var(--secondary-color);
}
0