2

Primefaces 3.1 の CSS クラスをオーバーライドしようとしています。オーバーライドするクラス名のパターンを探していました。私は試した：

.ui-datatable table {}
.ui-datatable .ui-datatable-header,.ui-datatable .ui-datatable-footer {}
.ui-datatable .ui-datatable-header {}
.ui-datatable th,.ui-datatable tfoot td {}
.ui-datatable .ui-datatable-data td,.ui-datatable .ui-datatable-data-empty td{}

ただし、行のコンテンツのみが集中化されましたが、ヘッダーの bgcolor などを変更することはできませんでした。その後、上書きしたクラスが使用されていない可能性があることに気付きました。驚いたことに、生成されたソース コードがこれらをクラスとして使用していないことがわかりました...

<div id="form:j_id1915418705_722af8cd" class="ui-datatable ui-widget">
<table role="grid"><thead><tr role="row">
    <th id="form:j_id1915418705_722af8cd:j_id1915418705_722af894" class="ui-state-default" role="columnheader">
        <div class="ui-dt-c">
            <span><span class="outputText">Model</span></span>
        </div>
    </th>
    <th id="form:j_id1915418705_722af8cd:j_id1915418705_722af942" class="ui-state-default" role="columnheader">
        <div class="ui-dt-c">
            <span><span class="outputText">Color</span></span>
        </div>
    </th></tr></thead><tfoot></tfoot>

    <tbody id="form:j_id1915418705_722af8cd_data" class="ui-datatable-data ui-widget-content">
        <tr data-ri="0" data-rk="BMW" class="ui-widget-content ui-datatable-even" role="row" aria-selected="false">
            <td role="gridcell">
                <div class="ui-dt-c">
                    <span class="outputText">BMW</span>
                </div>
            </td>
            <td role="gridcell">
                <div class="ui-dt-c">
                    <span class="outputText">Black</span>
                </div>
            </td>
        </tr>
        <tr data-ri="1" data-rk="Audi" class="ui-widget-content ui-datatable-odd" role="row" aria-selected="false">
            <td role="gridcell">
                <div class="ui-dt-c">
                    <span class="outputText">Audi</span>
                </div>
            </td>
            <td role="gridcell">
                <div class="ui-dt-c">
                    <span class="outputText">White</span>
                </div>
            </td>
        </tr>
    </tbody>
</table><input type="hidden" id="form:j_id1915418705_722af8cd_selection" name="form:j_id1915418705_722af8cd_selection" value="" autocomplete="off" />

誰かがテーブルのヘッダー、境界線、行の色を変更する方法を教えてもらえますか...生成されたソースコードを見てオーバーライドするPFのクラスを知る方法のパターンを誰かが教えてくれますか?

前もって感謝します。

4

1 に答える 1

3

最初のクラスは、ここでマークアップに含まれています。

<div id="form:j_id1915418705_722af8cd" class="ui-datatable ui-widget">

他の子クラスは、他の要素に自動的に適用されます。

ヘッドからリンクされた個別のCSSファイルにこれらのスタイルを含める場合、カスタムCSSは実際にはPrimefacesCSSスタイルによってオーバーライドされる可能性があります。

カスタムCSSがページに適用されることを確認するには、カスタムCSSをページ本体にインラインで追加して、適用されるかどうかを確認してください。

于 2012-05-11T19:16:43.213 に答える