[Erledigt] Tabelle einfärben

ByStones · 12.06.2010, 18:10

Hallo,
ich hab ein kleines CSS Problem und zwar geht das darum in einer Tabelle jede zweite Zeile einzufärben.
So weit so gut, aber das ganze hat einen Haken:
ich benutze rowspan und will dass Elemente die in diesem rowspan zusammengefasst sind auch alle eingefärbt werden oder eben nicht.
Beispieltabelle:

Code:

<table>
<tr>
<td rowspan="2">Farbig</td>
<td>Farbig</td>
</tr>
<tr>
<td>Farbig</td>
</tr>

<tr>
<td rowspan="2">Nicht Farbig</td>
<td>Nicht Farbig</td>
</tr>
<tr>
<td>Nicht Farbig</td>
</tr>

<tr>
<td rowspan="2">Farbig</td>
<td>Farbig</td>
</tr>
<tr>
<td>Farbig</td>
</tr>
</table>

Und wenn möglich will ich dabei so wenig class wie möglich vergeben und alles über css-Selektoren machen.

Bin leider kläglich gescheitert, und hoffe nun dass Ihr mir helfen könnt.

Grüße

Flor1an · 12.06.2010, 18:22

Du kannst dem tr eine Klasse geben immer a/b oder sowas:

HTML-Code:

<tr class="a"> ... </tr>
<tr class="b"> ... </tr>

Und im CSS dann einfach:

Code:

tr.a td { color ...} 
tr.b td { color ... }

nikosch · 12.06.2010, 18:23

Hmm. Wie eine 2-streifige Tabelle mit einem rowspan von 2 aussehen soll, frage ich mich.

ByStones · 12.06.2010, 18:24

@Flor1an:
Jo, aber genau das versuche ich zu vermeiden. Keine Klassen die nicht unbedingt sein müssen.

@nikosch:
Edit:

Zitat:

Hmm. Wie eine 2-streifige Tabelle mit einem rowspan von 2 aussehen soll, frage ich mich.

Was genau willst du mir sagen ? Das oben war nur ein Beispiel, es werden nicht immer rowspan 2 sein sondern unterschiedliche...

nikosch · 12.06.2010, 18:24

Also weniger als tr-Klassen kriegst DU browserübergreifend ohnehin nicht hin.

ByStones · 12.06.2010, 18:46

DU schon ?

nikosch · 12.06.2010, 18:56

Bloß ein Tippfehler. Passiert mir oft beim Du. Die Alternative heißt übrigens, via Javascript die fehlenden CSS-Selektoren nachzurüsten. Das sagt Dir aber jede bessere Seite über CSS-Layouting.

ByStones · 12.06.2010, 19:37

Ähm gibt es mit jQuery einen Selektor der mit nur elemente gibt wo eine bestimmte mindest anzahl an kindern hat ?
So in dem Sinne: tr:has-nth-childs(2) ?

nikosch · 12.06.2010, 19:38

Wozu?

ByStones · 12.06.2010, 19:43

Ich glaub langsam dass ich es doch mit Klassen machen muss weil ich anders es einfach nicht hinbekomme...
Ich wollte alle TRs nehmen die 3 children TDs haben, weil das wären dann die mit rowspan, die ohne haben ja nur 2 weil eins fehlt...

Was grad noch erschwerend hinzukommt, es gibt dazwischen auch welche die kein rowspan haben und auch nur 2 TDs weil eins colspan 2 hat...

Ich kann auch mal die Orgianltabelle posten...

Hier mal die Tabelle:

Code:

<table class="content-table">
    <thead>
        <tr>
            <td> Inhalt </td>
            <td> Inhalt </td>
            <td> Inhalt </td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td rowspan="4"> Inhalt </td>
            <td> Inhalt </td>
            <td> Inhalt </td>
        </tr>

        <tr>
            <td> Inhalt </td>
            <td> Inhalt </td>
        </tr>

        <tr>
            <td> Inhalt </td>
            <td> Inhalt </td>
        </tr>

        <tr>
            <td> Inhalt </td>
            <td> Inhalt </td>
        </tr>

        <tr>

            <td> Inhalt </td>
            <td colspan="2"> Inhalt </td>
        </tr>

        <tr>
            <td rowspan="5"> Inhalt </td>
            <td> Inhalt </td>
            <td> Inhalt </td>

        </tr>
        <tr>
            <td> Inhalt </td>
            <td> Inhalt </td>
        </tr>
        <tr>

            <td> Inhalt </td>
            <td> Inhalt </td>
        </tr>

        <tr>
            <td> Inhalt </td>
            <td> Inhalt </td>
        </tr>
        <tr>
            <td> Inhalt </td>
            <td> Inhalt </td>
        </tr>
    </tbody>

</table>

Im Anhang mal das Bild, die Erste Reihe is unwichtig, weil die im thead ist, und dadurch ganze einfach ausgeschlossen werden kann...

Edit: Ok der hat was gegen png Dateien, aber ich denk man kannst trozdem erkennen...

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
[Erledigt] Intertabellarische Berechnungen, wie?	dave303	Datenbanken	13	05.03.2010 11:58
Referenzen von eine Tabelle in die andere Kopieren	wali	PHP Tipps 2009	3	13.01.2010 21:53
MY-SQL Abfrage nach Daten aus Tabelle 1 die in Tabelle 2 nicht vorhanden sind	triple81	Datenbanken	1	25.12.2009 22:46
Bestehende php /Myqsl Tabelle Neben einander aus geben	Totti-Totti	PHP Tipps 2009	3	21.12.2009 11:00
Bilder in Tabelle einfügen Mysql oder direkt?!	DKuhn	PHP Tipps 2009	3	30.09.2009 10:14
tabelle 2 in tabelle 1 updaten	steffen_dk	Datenbanken	11	04.07.2009 15:04
Zeilenanzahl einer tabelle mit WHERE aber ohne schleife?	sovereign	Datenbanken	13	17.04.2006 20:34
[Erledigt] Problem mit dem Füllen einer Tabelle über Formular		PHP Tipps 2006	18	10.01.2006 12:51
Problem mit Anzeige einer Tabelle mit dem Firefox?		HTML, Usability und Barrierefreiheit	8	28.11.2005 15:08
[Erledigt] Tabelle aktualisieren		Datenbanken	3	23.11.2005 09:54
[Erledigt] Problem mit mySQL		Datenbanken	7	27.09.2005 12:06
[Erledigt] mysql abfrage über 4 Tabelle - bis 3 geht, bei der 4. habert		Datenbanken	2	08.09.2005 11:59
tabelle in tabelle ohne aussenrand	noskule	HTML, Usability und Barrierefreiheit	6	25.08.2005 14:17
Tabelle in Tabelle ausrichten		HTML, Usability und Barrierefreiheit	7	03.01.2005 14:32
HILFE: Column count doesn't match value count at row 1		Datenbanken	17	12.06.2004 16:45

12.06.2010, 18:10
ByStones Erfahrener Benutzer Registriert seit: 23.03.2010 Beiträge: 626 PHP-Kenntnisse: Anfänger	[Erledigt] Tabelle einfärben Hallo, ich hab ein kleines CSS Problem und zwar geht das darum in einer Tabelle jede zweite Zeile einzufärben. So weit so gut, aber das ganze hat einen Haken: ich benutze rowspan und will dass Elemente die in diesem rowspan zusammengefasst sind auch alle eingefärbt werden oder eben nicht. Beispieltabelle: Code: <table> <tr> <td rowspan="2">Farbig</td> <td>Farbig</td> </tr> <tr> <td>Farbig</td> </tr> <tr> <td rowspan="2">Nicht Farbig</td> <td>Nicht Farbig</td> </tr> <tr> <td>Nicht Farbig</td> </tr> <tr> <td rowspan="2">Farbig</td> <td>Farbig</td> </tr> <tr> <td>Farbig</td> </tr> </table> Und wenn möglich will ich dabei so wenig class wie möglich vergeben und alles über css-Selektoren machen. Bin leider kläglich gescheitert, und hoffe nun dass Ihr mir helfen könnt. Grüße


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

12.06.2010, 18:22
Flor1an da schreibt der ElePHPant Registriert seit: 18.06.2008 Beiträge: 8.903 PHP-Kenntnisse: Fortgeschritten	Du kannst dem tr eine Klasse geben immer a/b oder sowas: HTML-Code: <tr class="a"> ... </tr> <tr class="b"> ... </tr> Und im CSS dann einfach: Code: tr.a td { color ...} tr.b td { color ... }

12.06.2010, 18:23
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	Hmm. Wie eine 2-streifige Tabelle mit einem rowspan von 2 aussehen soll, frage ich mich. __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. --

12.06.2010, 18:24
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	Also weniger als tr-Klassen kriegst DU browserübergreifend ohnehin nicht hin. __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. --

12.06.2010, 18:46
ByStones Erfahrener Benutzer Registriert seit: 23.03.2010 Beiträge: 626 PHP-Kenntnisse: Anfänger	DU schon ?

12.06.2010, 18:56
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	Bloß ein Tippfehler. Passiert mir oft beim Du. Die Alternative heißt übrigens, via Javascript die fehlenden CSS-Selektoren nachzurüsten. Das sagt Dir aber jede bessere Seite über CSS-Layouting. __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. --

12.06.2010, 19:37
ByStones Erfahrener Benutzer Registriert seit: 23.03.2010 Beiträge: 626 PHP-Kenntnisse: Anfänger	Ähm gibt es mit jQuery einen Selektor der mit nur elemente gibt wo eine bestimmte mindest anzahl an kindern hat ? So in dem Sinne: tr:has-nth-childs(2) ?

12.06.2010, 19:38
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	Wozu? __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. --

12.06.2010, 19:43
ByStones Erfahrener Benutzer Registriert seit: 23.03.2010 Beiträge: 626 PHP-Kenntnisse: Anfänger	Ich glaub langsam dass ich es doch mit Klassen machen muss weil ich anders es einfach nicht hinbekomme... Ich wollte alle TRs nehmen die 3 children TDs haben, weil das wären dann die mit rowspan, die ohne haben ja nur 2 weil eins fehlt... Was grad noch erschwerend hinzukommt, es gibt dazwischen auch welche die kein rowspan haben und auch nur 2 TDs weil eins colspan 2 hat... Ich kann auch mal die Orgianltabelle posten... Hier mal die Tabelle: Code: <table class="content-table"> <thead> <tr> <td> Inhalt </td> <td> Inhalt </td> <td> Inhalt </td> </tr> </thead> <tbody> <tr> <td rowspan="4"> Inhalt </td> <td> Inhalt </td> <td> Inhalt </td> </tr> <tr> <td> Inhalt </td> <td> Inhalt </td> </tr> <tr> <td> Inhalt </td> <td> Inhalt </td> </tr> <tr> <td> Inhalt </td> <td> Inhalt </td> </tr> <tr> <td> Inhalt </td> <td colspan="2"> Inhalt </td> </tr> <tr> <td rowspan="5"> Inhalt </td> <td> Inhalt </td> <td> Inhalt </td> </tr> <tr> <td> Inhalt </td> <td> Inhalt </td> </tr> <tr> <td> Inhalt </td> <td> Inhalt </td> </tr> <tr> <td> Inhalt </td> <td> Inhalt </td> </tr> <tr> <td> Inhalt </td> <td> Inhalt </td> </tr> </tbody> </table> Im Anhang mal das Bild, die Erste Reihe is unwichtig, weil die im thead ist, und dadurch ganze einfach ausgeschlossen werden kann... Edit: Ok der hat was gegen png Dateien, aber ich denk man kannst trozdem erkennen... Miniaturansicht angehängter Grafiken Geändert von ByStones (12.06.2010 um 19:52 Uhr).