Primefaces dataTable - 圆角 - 怎么样？

Question

在FireFox 18上测试我的代码.

我正试图在一个主要的p:dataTable桌子上找到圆角......

为此我正在使用jQuery插件Corner.

我在xhtml的末尾添加了以下脚本部分:

<script>
$(".ui-datatable table").corner();
</script>

然而,桌角不会圆润.

该表的xhtml是:

            <p:dataTable var="row" value="#{myBean.rows}">  
                <p:column headerText="">  
                    <h:outputText value="#{row.name}" />  
                </p:column>  

                <p:column headerText="Address">  
                    <h:outputText value="#{row.address}" />  
                </p:column>  

                <p:column headerText="10 mins">  
                    <h:outputText value="#{row.gt10min}" />  
                </p:column>  

                <p:column headerText="20 mins">  
                    <h:outputText value="#{row.gt20min}" />  
                </p:column>

                <p:column headerText="30 mins">  
                    <h:outputText value="#{row.gt30min}" />  
                </p:column>  
            </p:dataTable> 

jQuery链接到xhtml,因为当我尝试它时,效果应用于其他元素.

我在这里错过了什么？

是否有可能通过我正在使用的jQuery插件或其他jQuery插件实现这种效果？

Answer 1

我不熟悉jQuery角落插件,也不想看看它的源代码看它失败的地方,但你也可以自己投入必要的CSS.

.ui-datatable.ui-corner-all table {
    border-collapse: separate;
    *border-collapse: collapse; /* Fallback for IE <=7. */
    border-spacing: 0; 
}
.ui-datatable.ui-corner-all table tr:first-child th:first-child {
    -moz-border-radius: 6px 0 0 0; -webkit-border-radius: 6px 0 0 0; border-radius: 6px 0 0 0;
}
.ui-datatable.ui-corner-all table tr:first-child th:last-child {
    -moz-border-radius: 0 6px 0 0; -webkit-border-radius: 0 6px 0 0; border-radius: 0 6px 0 0;
}
.ui-datatable.ui-corner-all table tr:first-child th:only-child{
    -moz-border-radius: 6px 6px 0 0; -webkit-border-radius: 6px 6px 0 0; border-radius: 6px 6px 0 0;
}
.ui-datatable.ui-corner-all table tbody td {
    border-top: 0;
    *border-top: inherit; /* Fallback for IE <=7. */
}
.ui-datatable.ui-corner-all table tr:last-child td:first-child {
    -moz-border-radius: 0 0 0 6px; -webkit-border-radius: 0 0 0 6px; border-radius: 0 0 0 6px;
}
.ui-datatable.ui-corner-all table tr:last-child td:last-child {
    -moz-border-radius: 0 0 6px 0; -webkit-border-radius: 0 0 6px 0; border-radius: 0 0 6px 0;
}
.ui-datatable.ui-corner-all table tr:last-child td:only-child{
    -moz-border-radius: 0 0 6px 6px; -webkit-border-radius: 0 0 6px 6px; border-radius: 0 0 6px 6px;
}

要让它运行,只需添加ui-corner-all样式<p:dataTable>

<p:dataTable ... styleClass="ui-corner-all">