3

JSF：

...
    xmlns:t="http://myfaces.apache.org/tomahawk">
     <t:panelGrid columns="4">
       ...
     </t:panelGrid>

tr它动态生成带有's 和td' 元素的普通旧 HTML 表格。

如何为这些tr和/或td元素设置特定的 CSS 样式？

4

1 回答 1

7

使用 columnClasses 和 rowClasses 属性给每个单元格一个唯一的类

例如：

 <t:panelGrid columns="4" columnClasses="a,b,c,d" rowClasses="x,y,z">

 </t:panelGrid>

列类

columnClasses 属性接受将应用于表格列的以逗号分隔的 CSS 样式类列表。单个列的样式类也可以在空格分隔的列表中定义。样式类作为呈现的 td 或 th 元素的 class 属性值应用于表列。

用于将 CSS 样式类应用于表格列的算法很简单。在表格呈现过程中，样式类一次应用于一个列，直到 (a) 没有更多列要显示或 (b) 没有更多样式类要应用。

* If (a) happens at the same time as (b), the next row in the table is rendered.
* If (a) happens before (b), the remaining style classes are ignored.
* If (b) happens before (a), the remaining columns will not have style classes.

行类

rowClasses 属性接受以逗号分隔的 CSS 样式类列表，以应用于表格的行。单个行的样式类也可以在空格分隔的列表中定义。样式类作为呈现的 tr 元素的类属性的值应用于表格行。

样式类以与定义它们的顺序相同的顺序应用于行。例如，如果有两个样式类，第一个应用于第一行，第二个应用于第二行，第一个应用于第三行，第二个应用于第四行，依此类推。样式列表从头开始循环，直到没有更多行可显示。

在我的标准 JSF 项目中（Mojarra 2.0.3）

此标签生成：

   <h:panelGrid border="1"
                columns="4" 
                columnClasses="a,b,c,d" 
                rowClasses="x,y,z">

                    <h:outputText value="ax"/>
                    <h:outputText value="bx"/>
                    <h:outputText value="cx"/>
                    <h:outputText value="dx"/>

                    <h:outputText value="ay"/>
                    <h:outputText value="by"/>
                    <h:outputText value="cy"/>
                    <h:outputText value="dy"/>

                    <h:outputText value="az"/>
                    <h:outputText value="bz"/>
                    <h:outputText value="cz"/>
                    <h:outputText value="dz"/>

   </h:panelGrid>

这个 HTML：

    <table border="1">
        <tbody>
            <tr class="x">
                <td class="a">ax</td>
                <td class="b">bx</td>
                <td class="c">cx</td>
                <td class="d">dx</td>
            </tr>
            <tr class="y">
                <td class="a">ay</td>
                <td class="b">by</td>
                <td class="c">cy</td>
                <td class="d">dy</td>
            </tr>
            <tr class="z">
                <td class="a">az</td>
                <td class="b">bz</td>
                <td class="c">cz</td>
                <td class="d">dz</td>
            </tr>
        </tbody>
    </table>
于 2011-04-08T11:46:51.757 回答