Clever Geek Handbook

Primary DataTable - Rounded Corners - How?

Checking my code on FireFox 18.

I am trying to get rounded corners on a table <...>.

For this I am using the jQuery Corner plugin .

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

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

However, the corners of the table are not rounded.

Xhtml table for table:

            <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 is related to xhtml as the effect is applied to other elements when trying.

What am I missing here?

Is it possible to achieve this effect with the jQuery plugin I'm using or another jQuery plugin?

+3


source to share


2 answers


I'm not familiar with the jQuery plugin and I'm not in the mood to look at its source code to see where it failed, but you can also just insert the required 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;
}


To run it just add ui-corner-all

styleclass to<p:dataTable> 

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


source


Provided the .ui-accordion.ui-accordion-header are the classes assigned to the datatable, you can do this -

<script>
$(document).ready(function() {
    $(".ui-accordion .ui-accordion-header").corner();
});
</script>


But you're better off using CSS for rounded corners.

0


source






More articles:


All Articles