How to edit the cell layout of a primefaces datatable


It’s not easy to edit the layout of a datatable cell in Primefaces. Not at all when we’re speaking about the cell borders.

Create a datatable:

<p:dataTable value="#{myBean.values}" var="var" id="datatable">
    <p:column headerText="myValues1" styleClass="values1">
        <h:outputText value="#{var.1}" />

    <p:column headerText="myValues2">
        <h:outputText value="#{var.2}" />

Now we want “myValues1” to have a red border with a gray background color while “myValues2” stays in the standard layout. Add the next CSS-code:

.ui-datatable .ui-datatable-data td {
    border-bottom: white;
    border-right: white;

.ui-datatable .ui-datatable-data .values1 {
    border: 1px solid #ff3300;
    background-color: #f2f2f2;

1 comment

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Tag Cloud