[Fools]

Hallo!

Eine etwas ungewöhnliche Frage, doch ich hoffe trotzdem auf Hilfe.

Folgender Sachverhalt:


Dieser HTML-Code liegt mir vor:

<table>
  <tr>
    <td>
	  <input type="radio" id="rad1" value="1" />
	</td>
    <td>
	  <input type="radio" id="rad2" value="2" />
	</td>
    <td>
	  <input type="radio" id="rad3" value="3" />
	</td>
    <td>
	  <input type="radio" id="rad4" value="4" />
	</td>
  </tr>
</table>

Mein Ziel ist es nun, die dritte Spalte innerhalb dieser Tabelle mit bestimmten (style-)Eigenschaften mittels CSS zu gestalten. Z. B. soll die dritte Spalte in einer anderen Farbe als die restlichen Spalten dieser Tabelle dargestellt werden.


Soweit so gut und sicherlich auch keine Herausforderung.

Aber mal angenommen, mir bleibt es verwehrt die <td>-Elemente innerhalb dieser Tabelle mit Attributen zu beschreiben (also keine id, style oder sonsitges sind für die <td>-Elemente erlaubt). Und des Weiteren bleibt es mir verwehrt andere Elemente innerhalb des <tr>-Tags hinzuzufügen. D. h. folgender Code-Fetzen z. B. mit einem hinzugefügten <div>-Element wäre nicht gestattet:

<table>
  <tr>
    <td>
	  <input type="radio" id="rad1" value="1" />
	</td>
    <td>
	  <input type="radio" id="rad2" value="2" />
	</td>
	<div ...>
      <td>
	    <input type="radio" id="rad3" value="3" />
	  </td>
	</div>
    <td>
	  <input type="radio" id="rad4" value="4" />
	</td>
  </tr>
</table>

Das Einzige was erlaubt wäre, ist den <table>-Tag und die <input>-Elemente mit Attributen zu bestücken (id, class, style etc.).

Gäbe es unter diesen genannten Einschränkungen trotzdem eine Möglichkeit, die dritte Spalte innerhalb dieser Tabelle mit CSS anzusprechen und individuell anzusprechen?


Vielen Dank für eure Mühen!

[MrMurphy]

Hallo,

Z. B. soll die dritte Spalte in einer anderen Farbe als die restlichen Spalten dieser Tabelle dargestellt werden.

Auf solche undifferenzierten Fragen ist schwierig konkret zu antworten. Dann werden auf jede Antwort in der Regel weitere Einschränkungen nachgeschoben. Was soll denn noch alles anders dargestellt werden?

Wenn es um die Hintergrundfarbe geht, kann man der Tabelle einfach ein entsprechendes Hintergrundbild geben, das die Spalte dann einfärbt.

Ich würde die Tabelle, wenn sie denn aus irgendwelchen Gründen vorhanden sein muss, einfach leer lassen und die Input-Felder in Form einer Liste erstellen, der dürfen dann ja wohl Eigenschaften mitgegeben werden.

Gruss

MrMurphy

[uspri]

Gib der Tabelle eine ID oder eine Class und dann so (hab mal die ID test vergeben):

table#test td:nth-child(5) { background:red;}

Achso, die dritte Spalte wolltest Du? Dann so:

table#test td:nth-child(4) { background:red;}

[MrMurphy]

Hallo,

mal abgesehen davon, das für die 3. Spalte die (3) genommen werden muss wäre es vielleicht sinnvoll darauf hinzuweisen, das nth-child nicht zum aktuellen css gehört und deshalb auch nicht jeder Browser damit umgehen kann.

Gruss

MrMurphy

[threadi]

Und über JavaScript die Spalte anzusprechen und dynamische den gewünschten Wert zu setzen ist keine Alternative?

[gato]

Zitat von MrMurphy

... wäre es vielleicht sinnvoll darauf hinzuweisen, das nth-child nicht zum aktuellen css gehört und deshalb auch nicht jeder Browser damit umgehen kann.

De fakto ist CSS Selectors Level 3 bereits eine Recommentadtion (verabschiedeter Standard per W3-Terminologie). Es wird nur noch nicht offiziell so genannt, weil CSS 2.1 und Namepsaces noch keine RECs sind (woran aber aktuell stark gearbeitet wird).

[uspri]

Zitat von MrMurphy

Hallo,

mal abgesehen davon, das für die 3. Spalte die (3) genommen werden muss wäre es vielleicht sinnvoll darauf hinzuweisen, das nth-child nicht zum aktuellen css gehört und deshalb auch nicht jeder Browser damit umgehen kann.

Gruss

MrMurphy

Und warum wird dann bei meinem Test mit der 4 die dritte Spalte angesprichen?

[Fools]

Vielen Dank für die rege Beteiligung!

Zitat von uspri

Gib der Tabelle eine ID oder eine Class und dann so (hab mal die ID test vergeben):

table#test td:nth-child(5) { background:red;}

Achso, die dritte Spalte wolltest Du? Dann so:

table#test td:nth-child(4) { background:red;}

Perfekt! Genau so einen Lösungsansatz habe ich gesucht.

Thanks/Merci/Grazie.

Zitat von MrMurphy

...wäre es vielleicht sinnvoll darauf hinzuweisen, das nth-child nicht zum aktuellen css gehört und deshalb auch nicht jeder Browser damit umgehen kann.

Auch für diesen Hinweis ein Dankeschön.

Zitat von threadi

Und über JavaScript die Spalte anzusprechen und dynamische den gewünschten Wert zu setzen ist keine Alternative?

Was ich seit gestern weiß, auch JS ist ein Lösungsansatz der funktioniert.



Im Übrigen auch das hier funktioniert (kompatibel mit Moz. Firefox, MS IE 7 und höher):

/* only for the third 'td'-element within 'table.test' */
table.test td + td + td {
   background-color: red;
}