覆盖数据表的primefaces 3.1 css答案

【问题标题】：overriding primefaces 3.1 css for datatable覆盖数据表的primefaces 3.1 css
【发布时间】：2012-05-20 08:01:40
【问题描述】：

我正在尝试覆盖 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 中的哪个类来覆盖查看生成的源代码的模式。

提前致谢。

【问题讨论】：

标签： css jsf-2 primefaces

【解决方案1】：

第一个类包含在标记中：

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

其他子类会自动将自己应用到其他元素。

如果您将这些样式包含在从 head 链接的单独 CSS 文件中，您的自定义 CSS 实际上可能会被 Primefaces CSS 样式覆盖。

要确保您的自定义 CSS 自身适用于页面，请尝试将自定义 CSS 内联添加到页面正文中，然后查看它是否适用。

【讨论】：

我认为我的 css 正在被应用，因为列值是集中的。但我认为我在这里没有使用正确的类名。我应该在我的自定义 css 中编写什么类来更改表头。你能帮我写2-3行吗？
@user1226447 我无法判断您做错了什么，因为我不知道您的 CSS 更改是什么。您需要学习如何使用 Firebug 工具来评估哪些 CSS 类和样式被应用于给定元素。它将允许您直接修改页面上的样式，这样您就可以测试您的 CSS 而无需更改样式并重新加载页面。