Das letzte Element in einer JSF-Datentabelle formatieren

Question

Ich habe eine Situation, in der ich mehr Daten habe, als in einer einzelnen Zeile zurückgegeben werden können, die einem dataTable-Element zugeordnet ist. Um damit umzugehen, habe ich einfach die Ergebnisse in einer einzelnen Zelle kombiniert. Was ich suche, ist eine Möglichkeit zu bestimmen, ob ich das letzte Objekt im Ergebnis erreicht habe, damit ich den unteren Rand, der als mein Trennzeichen verwendet wird, entfernen kann. Letztendlich weiß ich nicht, mit wie vielen Objekten ich es zu tun haben werde.

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

Vielen Dank im Voraus für jegliche Hilfe.

Answer 1

Das hängt von der IE-Browserversion ab, die Sie unterstützen möchten.

Wenn Ihnen die Unterstützung für IE6/7 nichts ausmacht, könnten Sie dafür die CSS2 :last-child Pseudoklasse verwenden.

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

mit

(ja, IE7 unterstützt das CSS2-Pseudoklassen-Gegenstück :first-child , aber es unterstützt wirklich nicht das :last-child !)

Wenn Ihnen IE7 wichtig ist, aber nicht IE6, dann können Sie es auch andersherum machen, mit einem border-top anstelle von border-bottom , das auf none festgelegt ist bei :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;
}

Wenn Ihnen jedoch auch IE6 wichtig ist (was heutzutage diskutabel ist), dann kommen Sie nicht umhin, die Zeichenfolge der Zeilenklassen (nicht Spaltenklassen!) im verwalteten Bean selbst zu generieren.

mit

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

und diesem CSS

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