styling the last record in a jsf datatable

Question

I have a situation where I have more data than can be accommodated in a single row being returned to a dataTable element. In order to deal with this I have simply combined the results into a single cell. What I am looking for is a way to determine whether or not I have reached the last object in the result set so that I can drop the bottom-border used as my separator. Ultimately I do not know how many objects I will be dealing with.

.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

That depends on the IE browser version which you'd like to support.

If you don't care about IE6/7 support, then you could use the CSS2 :last-child pseudoclass for 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">

(yes, IE7 supports the CSS2 pseudoclass counterpart :first-child, but it does really not support the :last-child!)

If you care about IE7, but not about IE6, then you can also do it the other way round, with a border-top instead of border-bottom which is set to none on :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;
}

If you however also care about IE6 (which is discutable these days), then you can't go around generating the string of row classes (not column classes!) youself inside the managed bean.

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

with

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

and this CSS

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