Entwickler-Ecke
Beschreibungssprachen - [CSS] Automatisch zw. 2 Tabellenspalten unterscheiden
Heiko - Sa 14.07.07 17:59
Titel: [CSS] Automatisch zw. 2 Tabellenspalten unterscheiden
Hallo,
besteht die Möglichkeit per CSS jeder 2. Tabellenspalte eine andere Hintergrundfarbe zu verpassen ohne mit PHP eingreifen zu müssen?
Gedacht habe ich es mir so:
Quelltext
1: 2: 3: 4: 5: 6:
| Tabellenkopf 1. Spalte: Hellblau 2. Spalte: Blau 3. Spalte: Hellblau 4. Spalte: Blau 5. Spalte: Hellblau |
Ich überlege die ganze Zeit, ob man es irgendwie mit dem + und den [] hinbekommt. Hat einer von euch das schon einmal probiert?
PS: Ich versuchs jetzt mal selber, aber falls einer von euch das weiß, kürzt es die Testdauer ab ;).
Grüße
Heiko
Heiko - Sa 14.07.07 19:17
Mhm Problem: Wie greife ich bei den [] CSS-Einstellungen ab? Normalerweise ist es ja so: input[type="submit"]
Aber wie funktioniert das bei CSS? Denn table.contenttable * th[style="background-color: red"] wird ja wohl kaum gehen, da es ja nicht die einzige CSS-Eigenschaft dort drin ist.
Christian V. - So 15.07.07 12:47
Ich denke nicht, dass du um PHP herumkommen wirst. Ich habe es jedenfalls ncoh nie anders gesehen, als jeder 2. Spalte einfach eine andere Klasse zuzuweisen.
<td class="hellblau"></td><td class="blau"></td><td class="hellblau"></td><td class="blau"></td>
Zu den Attributselektoren:
Versucht mal so: [syle~="background-color: red"]
Das sollte für alle die gelten, welche dies beinhalten.
DarkLord05 - So 15.07.07 18:01
Geht NICHT nur mit CSS. Du musst der Celle ja irgendwie sagen das sie Hellblau oder Dunkelblau sein soll.
Sollte ich mich irren, belehrt mich bitte *g*
Brother John - So 15.07.07 18:20
Wenn du sowas hast:
Quelltext
1: 2: 3: 4: 5: 6: 7: 8: 9: 10: 11: 12: 13:
| <table> <tr> <td>Z1, S1</td> <td>Z1, S2</td> ...usw... </tr> <tr> <td>Z2, S1</td> <td>Z2, S2</td> ...usw... </tr> ...usw... </table> |
brauchst du sowas dazu:
Quelltext
1: 2: 3: 4: 5: 6: 7: 8: 9:
| tr td { background-color: blue } tr td + td { background-color: lightblue } tr td + td + td { background-color: blue } tr td + td + td + td { background-color: lightblue } ...usw... |
Funktioniert leider nicht im IE, weil der den +-Operator nicht kennt. Das ganze für eine beliebige Anzahl von Spalten zu erweitern, geht soweit ich weiß nicht.
Heiko - So 15.07.07 18:33
Ich dachte an so etwas hier:
XML-Daten
1: 2: 3: 4: 5: 6: 7: 8: 9: 10: 11: 12: 13: 14: 15: 16: 17: 18: 19: 20: 21: 22: 23: 24: 25: 26: 27:
| <?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de"> <head> <title>test</title> <style type="text/css"> table * tr {background-color: #A0FFFF} tr[style="background-color: #A0FFFF"] + tr {background-color: #FFA0FF} </style> </head> <body> <table> <tr> <td>bla1</td> <td>bla2</td> </tr> <tr> <td>bla1</td> <td>bla2</td> </tr> <tr> <td>bla1</td> <td>bla2</td> </tr> </table> </body> </html> |
Aber es scheitert an dem hervorgehobenem :(.
//EDIT: So funktioniert es für die 2. zeile ;):
XML-Daten
1: 2: 3: 4: 5: 6: 7: 8: 9: 10: 11: 12: 13: 14: 15: 16: 17: 18: 19: 20: 21: 22: 23: 24: 25: 26: 27:
| <?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de"> <head> <title>test</title> <style type="text/css"> tr[style="background-color: rgb(160, 255, 255);"] + tr {background-color: #FFA0FF} tr[style="background-color: rgb(255, 160, 255);"] + tr {background-color: #A0FFFF} </style> </head> <body> <table> <tr style="background-color: #A0FFFF"> <td>bla1</td> <td>bla2</td> </tr> <tr> <td>bla1</td> <td>bla2</td> </tr> <tr> <td>bla1</td> <td>bla2</td> </tr> </table> </body> </html> |
Problem: Er trägt die Daten nicht wirklich in dem DOM-Baum ein. Dort trägt er scheinbar nur das ein, was direkt mit style= definiert ist... :(.
Moderiert von Christian S.: Code- durch XML-Tags ersetzt
Brother John - So 15.07.07 18:42
Das kann schon deswegen nicht funktionieren, weil du damit Zeilen ansprichst anstatt Spalten.
/Edit:
Diesem Vergleich nach
http://www.webdevout.net/browser-support-css#support-css2selectors
wird der []-Selektor noch von keinem gängigen Browser wirklich problemlos unterstützt. Ich hab auf Anhieb auch in den CSS-Specs nichts darüber gefunden, wie [] und + zusammenwirken sollen.
Um auf der sicheren Seite zu sein, kommst du wahrscheinlich um eine PHP-Lösung nicht herum. Wenn es im IE funktionieren soll, klappt es mit CSS sowieso nicht.
Heiko - So 15.07.07 19:49
Brother John hat folgendes geschrieben: |
Das kann schon deswegen nicht funktionieren, weil du damit Zeilen ansprichst anstatt Spalten. |
Wollte ich etwas anderes?
@IE: Wenns nur der IE wäre ;). In dem Fall streikt Opera auch schon, wo FF wenigstens noch die erste Zeile hinbekommt ;).
GTA-Place - So 15.07.07 20:04
Heiko hat folgendes geschrieben: |
Brother John hat folgendes geschrieben: | Das kann schon deswegen nicht funktionieren, weil du damit Zeilen ansprichst anstatt Spalten. |
Wollte ich etwas anderes? |
Wenn man nach dem Titel des Topics geht schon :mrgreen:
Christian V. - So 15.07.07 20:34
Warum löst du das ganze nicht einfach per PHP?
So sparst du eine Menge Zeit und Nerven.
Heiko - So 15.07.07 20:38
Ne, das erspart mir keine Nerven ;). Wenn man für jede Tabelle das in php/tpl reinnehmen muss, anstatt es automatisiert passiert...
Entwickler-Ecke.de based on phpBB
Copyright 2002 - 2011 by Tino Teuber, Copyright 2011 - 2024 by Christian Stelzmann Alle Rechte vorbehalten.
Alle Beiträge stammen von dritten Personen und dürfen geltendes Recht nicht verletzen.
Entwickler-Ecke und die zugehörigen Webseiten distanzieren sich ausdrücklich von Fremdinhalten jeglicher Art!