Ankündigung

Einklappen
Keine Ankündigung bisher.

[Erledigt] Tabelle einfärben

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • [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
    Signatur:
    PHP-Code:
    $s '0048656c6c6f20576f726c64';
    while(
    $i=substr($s=substr($s,2),0,2))echo"&#x00$i;"


  • #2
    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 ... }

    Kommentar


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

      „Emoticons machen einen Beitrag etwas freundlicher. Deine wirken zwar fachlich richtig sein, aber meist ziemlich uninteressant.
      Wenn man nur Text sieht, haben viele junge Entwickler keine interesse, diese stumpfen Texte zu lesen.“


      --

      Kommentar


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

        @nikosch:
        Edit:
        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...
        Signatur:
        PHP-Code:
        $s '0048656c6c6f20576f726c64';
        while(
        $i=substr($s=substr($s,2),0,2))echo"&#x00$i;"

        Kommentar


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

          „Emoticons machen einen Beitrag etwas freundlicher. Deine wirken zwar fachlich richtig sein, aber meist ziemlich uninteressant.
          Wenn man nur Text sieht, haben viele junge Entwickler keine interesse, diese stumpfen Texte zu lesen.“


          --

          Kommentar


          • #6
            DU schon ?
            Signatur:
            PHP-Code:
            $s '0048656c6c6f20576f726c64';
            while(
            $i=substr($s=substr($s,2),0,2))echo"&#x00$i;"

            Kommentar


            • #7
              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.
              --

              „Emoticons machen einen Beitrag etwas freundlicher. Deine wirken zwar fachlich richtig sein, aber meist ziemlich uninteressant.
              Wenn man nur Text sieht, haben viele junge Entwickler keine interesse, diese stumpfen Texte zu lesen.“


              --

              Kommentar


              • #8
                Ä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) ?
                Signatur:
                PHP-Code:
                $s '0048656c6c6f20576f726c64';
                while(
                $i=substr($s=substr($s,2),0,2))echo"&#x00$i;"

                Kommentar


                • #9
                  Wozu?
                  --

                  „Emoticons machen einen Beitrag etwas freundlicher. Deine wirken zwar fachlich richtig sein, aber meist ziemlich uninteressant.
                  Wenn man nur Text sieht, haben viele junge Entwickler keine interesse, diese stumpfen Texte zu lesen.“


                  --

                  Kommentar


                  • #10
                    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...
                    Angehängte Dateien
                    Signatur:
                    PHP-Code:
                    $s '0048656c6c6f20576f726c64';
                    while(
                    $i=substr($s=substr($s,2),0,2))echo"&#x00$i;"

                    Kommentar


                    • #11
                      Ich kann auch mal die Orgianltabelle posten...
                      Mach das mal. Und am besten noch ne Skizze, was Du einfärben willst.
                      --

                      „Emoticons machen einen Beitrag etwas freundlicher. Deine wirken zwar fachlich richtig sein, aber meist ziemlich uninteressant.
                      Wenn man nur Text sieht, haben viele junge Entwickler keine interesse, diese stumpfen Texte zu lesen.“


                      --

                      Kommentar


                      • #12
                        Hab ich gemacht, siehe meinen anderen Post.
                        Aber ich machs auch gern doppelt...

                        Diesmal als jpg...

                        Wie schon vorher gesagt, die erste Zeile ist im thead die wird einfach ausgeschlossen, der rest ist im tbody...

                        Edit:
                        Das ist der Anfang, aber nach unten wirds dann net komplizierter, sondern geht einfach nach dem muster weiter...
                        Angehängte Dateien
                        Signatur:
                        PHP-Code:
                        $s '0048656c6c6f20576f726c64';
                        while(
                        $i=substr($s=substr($s,2),0,2))echo"&#x00$i;"

                        Kommentar


                        • #13
                          Ich sehe für dein Vorhaben mit (aktuell unterstütztem) CSS keine direkte Möglichkeit.

                          Wenn du keine Klassen nutzen willst, dann könntest du noch die HTML-Struktur anpassen, so dass CSS eine „Zusammengehörigkeit“ zwischen per rowspan „erweiterten“ und daneben liegenden einzelnen Zellen erkennen kann.

                          Code:
                          <tr>
                          <td rowspan="2">Farbig</td>
                          <td>Farbig</td>
                          </tr> 
                          <tr>
                          <td>Farbig</td>
                          </tr>
                          Hier könnte man entweder die rechten TD noch mal in eine weitere Tabelle packen - dann kann das rowspan entfallen, und über die drumherum liegende Zeile kann alles gemeinsam formatiert werden.

                          Das wäre aber natürlich extrem unschön.
                          Sinnvoller könnte es da noch sein, das ganze auf mehrere TBODY zu verteilen (und diese dann zur „Gruppierung“ zwecks Formatierung zu nutzen) - wie sinnvoll das ist, hängt natürlich von den Daten ab, die du konkret darstellen willst. (Und wegen letzterem ist es eigentlich sinnfrei, das ganze überhaupt zu diskutieren, so lange nur weitgehend aussagefreier Tabellen-Code vorliegt - Beispieldaten wären hier vom semantischen Standpunkt aus das Interessante.)

                          Kommentar


                          • #14
                            Ich sehe für dein Vorhaben mit (aktuell unterstütztem) CSS keine direkte Möglichkeit.
                            Das große Problem sind doch eigentlich die Selektoren wie man die Elemente findet, und da man mit jQuery den Selektor Wausführen" würde hat man CSS3 Support + das was die noch eingebaut haben...
                            Denkst du dass es damit möglich wäre ?

                            Mehrere TBODYs wäre ansich schonmal ne gute Idee...

                            Datenmäßig: 1. Spalte: Ein Kategorienname, 2. Spalte: Unterteilung in unterKategorie/Informatione, 3. Eine abschließende nformation
                            Signatur:
                            PHP-Code:
                            $s '0048656c6c6f20576f726c64';
                            while(
                            $i=substr($s=substr($s,2),0,2))echo"&#x00$i;"

                            Kommentar


                            • #15
                              Wieso markierst Du nicht einfach die wenigen weißen Zeilen? Oder ist das Beispiel schlecht gewählt?
                              --

                              „Emoticons machen einen Beitrag etwas freundlicher. Deine wirken zwar fachlich richtig sein, aber meist ziemlich uninteressant.
                              Wenn man nur Text sieht, haben viele junge Entwickler keine interesse, diese stumpfen Texte zu lesen.“


                              --

                              Kommentar

                              Lädt...
                              X