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>

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

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