Entwickler-Ecke :: Thema anzeigen - [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...