html - 将 panelrid 中的列设置为特定宽度

Question

在我的 jsf 页面中，我有一个包含 3 列的 panelGrid。为了给这些列一个特定的 witdh 我使用了 columnClasses 属性，这样

    columnClasses="width20perc,width30perc,width50perc"

然后在我的 default.css 中:

    .width20perc
    {
    width: 40px !important;
    min-width: 15em !important;
    }

通常我会在那里使用 20%，但为了将宽度至少更改为其他值，我使用了 40px。但是，即使这样也行不通……我无法以任何方式更改每列的宽度。当我查看表的源代码时，它说

    <td class=width20perc>

所以 -elements 确实有正确的类，但是当我检查它们的 css 样式时，它们不会继承我在 default.css 中定义的样式。但是，它们确实继承了以下字体大小样式，该样式也在我的 default.css 中定义，因此我认为样式表已正确加载:

    .ui-widget,
    .ui-widget .ui-widget
    {
    font-size: 90% !important;
    }

我使用的是 primefaces 3.4.2，我在我的默认模板中加载我的输出样式表，如下所示:

    <h:head>
        <h:outputStylesheet name="css/default.css" />
          <ui:insert name="head">
             <title>Page title</title>
          </ui:insert>
    </h:head>

Answer 1

覆盖 PrimeFaces 样式时，不要使用丑陋的 !important破解。只需在 PrimeFaces 样式之后加载您的样式。您可以通过将 <h:outputStylesheet>在<h:body>里面.

<h:head>
    ...
</h:head>
<h:body>
    <h:outputStylesheet name="css/default.css" />
    ...
</h:body>

另见:

• > How do I override default PrimeFaces CSS with custom styles?