Primefaces dataTable - rounded corners - how to?

Question

Testing my code on FireFox 18.

I'm trying to get rounded corners on a primefaces' p:dataTable table......

For this I'm using the jQuery plugin Corner.

I added to the end of my xhtml the following script section:

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

However the table corners do not get rounded.

The xhtml for the table is:

            <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> 

The jQuery is linked to the xhtml, since the effect is applied on other elements when I try it.

What am I missing here?

Is it possible to achieve this effect by the jQuery plugin I'm using, or by other jQuery plugin?

Answer 1

I'm not familiar with jQuery corner plugin, nor am I in a mood to look at its source code to see where it failed, but you could also just throw in the necessary CSS yourself.

.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;
}

And to get it to run, just add ui-corner-all styleclass to the <p:dataTable>

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