9

PrimefacesDatatableのヘッダー列にスタイルを適用する方法を知りたいです。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データテーブルヘッダーはhtml<th>要素を生成します。スタイル定義で要素セレクターを使用できます。

th {
  color: red !important;
}

これにより、たとえば<th>、ページ上のすべての要素のフォントの色が変更されます。

この選択が目的に対して十分に具体的でない場合は、データテーブルのIDと組み合わせることができます。

#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>次のコードを使用して、すべてのテーブルヘッダーをターゲットに設定できます。

.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 に答える