Styling last record in jsf datatable

Question

I have a situation where I have more data than can be placed on one line returned to the dataTable element. To handle this, I simply combined the results into one cell. What I'm looking for is a way to determine if I reached the last object in the result set so that I can omit the bottom border used as my separator. Ultimately, I do not know how many objects I will have.

.most {
    background-color:cyan;
    border-bottom:medium solid black;
}
.last {
    border-bottom:none;
}

<h:dataTable id="myTable" value="#{flowData.selectedItem.profile}" var="profile" columnClasses="most, last">
<h:column>
    <h:inputText id="_last" value="#{profile.last}" />
    <h:inputText id="_first" value="#{profile.first}" />
    <h:inputText id="_middle" value="#{profile.middle}" />
    <h:inputText id="_city" value="#{profile.city}" />
    <h:inputText id="_state" value="#{profile.state}" />
</h:column>
</h:dataTable>

Thanks in advance for any input.

Answer 1

It depends on the version of IE browser you would like to support.

If you don't need IE6 / 7 support, you can use the CSS2 pseudo-class :last-childfor this.

table.yourTableClass tbody tr td {
    background-color: cyan;
    border-bottom: medium solid black;
}
table.yourTableClass tbody tr:last-child td {
    border-bottom: none;
}

with

<h:dataTable ... styleClass="yourTableClass">

(, IE7 CSS2 :first-child, :last-child!)

IE7, IE6, , border-top border-bottom, none :first-child:

table.yourTableClass tbody tr td {
    background-color: cyan;
    border-top: medium solid black;
}
table.yourTableClass tbody tr:first-child td {
    border-top: none;
}

, , IE6 ( discutable ), ( !) bean.

<h:dataTable ... rowClasses="#{flowData.rowClasses}">

public String getRowClasses() {
    StringBuilder builder = new StringBuilder();
    int size = selectedItem.getProfile().size(); // getProfiles() ?

    for (int i = 0; i < size; i++) {
        builder.append((i + 1 < size) ? "most," : "last");
    }

    return builder.toString();
}

CSS

tr.more td {
    background-color: cyan;
    border-bottom: medium solid black;
}
tr.last td {
    border-bottom: none;
}