✔ JSF (JavaServer Faces) - Spaltengestaltung: selectOneRadio Feat. selectItem

[Fools]

Ich habe indes jede Menge Zeit investiert, doch leider ohne ersehnten Erfolg.

Jetzt wende ich mich an Euch und ich hoffe Ihr könnt mir weiter helfen!


Folgender etwas vereinfachter Sachverhalt:

Folgender JSF-Code liegt mir vor:

<h:selectOneRadio>
  <f:selectItem itemValue="1" />
  <f:selectItem itemValue="2" />
  <f:selectItem itemValue="3" />
  <f:selectItem itemValue="4" />
</h:selectOneRadio>

Obiger JSF-Code rendered mir diesen HTML-Code:

<table>
  <tr>
    <td><input type="radio" name="j_idt8:CDMSP01" id="j_idt8:CDMSP01:0" value="1" /><label for="j_idt8:CDMSP01:0"></label></td>
    <td><input type="radio" name="j_idt8:CDMSP01" id="j_idt8:CDMSP01:0" value="1" /><label for="j_idt8:CDMSP01:0"></label></td>
    <td><input type="radio" name="j_idt8:CDMSP01" id="j_idt8:CDMSP01:0" value="1" /><label for="j_idt8:CDMSP01:0"></label></td>
    <td><input type="radio" name="j_idt8:CDMSP01" id="j_idt8:CDMSP01:0" value="1" /><label for="j_idt8:CDMSP01:0"></label></td>
  </tr>
</table>

Ich möchte doch nur die dritte Spalte innerhalb dieser Tabelle mit bestimmten style-Eigenschaften ansprechen/gestalten. Z. B. soll die dritte Spalte in einer anderen Farbe als die restlichen Spalten dieser Tabelle dargestellt werden.

Ich mein, das ist doch nicht zu viel verlangt?!


Kleines anschauliches Beispiel:
http://img44.imageshack.us/i/table1f.jpg/



Da muss es doch irgendwie eine Möglichkeit geben die gerenderten Spalten nach seinen Bedürfnissen gestalten zu können. Ansonsten muss ich JSF im wahrsten Sinne des Wortes leider als graue Maus bezeichnen.


Noch eine Sache vorweg:

Ich habe auch folgendes bereits versucht, doch leider ohne Erfolg (mit div und CSS):

<h:selectOneRadio>
  <f:selectItem itemValue="1" />
  <f:selectItem itemValue="2" />
  <f:selectItem itemValue="3" />
  <div class="column-color">
    <f:selectItem itemValue="4" />
  </div>
</h:selectOneRadio>

Der entsprechende CSS-Code sah so aus:

div.column td {
   background-color: grey;
}

Daraufhin wurde folgender HTML-Code gerendered:

<div class="column-color"></div>
<table>
  <tr>
    <td><input type="radio" name="j_idt8:CDMSP01" id="j_idt8:CDMSP01:0" value="1" /><label for="j_idt8:CDMSP01:0"></label></td>
    <td><input type="radio" name="j_idt8:CDMSP01" id="j_idt8:CDMSP01:0" value="1" /><label for="j_idt8:CDMSP01:0"></label></td>
    <td><input type="radio" name="j_idt8:CDMSP01" id="j_idt8:CDMSP01:0" value="1" /><label for="j_idt8:CDMSP01:0"></label></td>
    <td><input type="radio" name="j_idt8:CDMSP01" id="j_idt8:CDMSP01:0" value="1" /><label for="j_idt8:CDMSP01:0"></label></td>
  </tr>
</table>

Wie Ihr sehen könnt, wurde mein div-HTML-Element einfach vor die gerendete Tabelle gestellt. Also greift sie natürlich auch nicht....



Ich brauche Hilfe!