Cube: Schatten hinter letzte Tabellenspalte legen

Hallo zusammen,

ich würde in einer Tabelle die letzte Spalte durch einen Schatten hervorheben. Wenn ich jetzt td:last-child nutze, wird es natürlich kein durchgehender Schatten für die gesamte Spalte sondern nur für jede Zelle einzeln.

Gibt es eine relativ simple Lösung, um mit box-shadow die letzte Spalte zu verschatten?

Schon jetzt besten Dank für eure Hilfe!
Florian

  1. @@Cube:

    nuqneH

    Gibt es eine relativ simple Lösung, um mit box-shadow die letzte Spalte zu verschatten?

    col:last-child, bzw. colgroup:last-child col:last-child. Setzt entsprechendes Tabellen-Markup voraus:

    <table>  
      <colgroup>  
        <col/><col/>  
      </colgroup>  
      <!-- evtl. weitere colgroup-Elemente -->  
      <thead></thead>  
      <!-- evtl. tfoot-Element -->  
      <tbody></tbody>  
      <!-- evtl. weitere tbody-Elemente -->  
    </table>
    

    Qapla'

    --
    „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
    1. Hi zusammen,

      danke für die schnellen Antworten und die nette Begrüßung. Die Lösung von Gunnar klingt toll, funktioniert aber leider nicht. Zumindest nicht in dem simplen Beispiel der w3school mit Chrome unter Windoof 8. Im <th> geht es ohne Probleme. Hab ich nen Denkfehler drin oder unterstützt col den box-shadow nicht?

        
      <!DOCTYPE html>  
      <html>  
      <body>  
        
      <table border="1">  
        <colgroup>  
          <col span="2" style="background-color:red">  
          <col style="box-shadow: 10px 10px 5px #888888;">  
        </colgroup>  
        <tr>  
          <th style="box-shadow: 10px 10px 5px #888888;">ISBN</th>  
          <th>Title</th>  
          <th>Price</th>  
        </tr>  
        <tr>  
          <td>3476896</td>  
          <td>My first HTML</td>  
          <td>$53</td>  
        </tr>  
        <tr>  
          <td>5869207</td>  
          <td>My first CSS</td>  
          <td>$49</td>  
        </tr>  
      </table>  
      </body>  
      </html>  
      
      
      1. Hi,

        funktioniert aber leider nicht. Zumindest nicht in dem simplen Beispiel der w3school

        w3school sollte man mit äußerster Vorsicht betrachten.
        Dort wurde schon viel Mist erzählt.

        cu,
        Andreas

        --
        Warum nennt sich Andreas hier MudGuard?
        O o ostern ...
        Fachfragen per Mail sind frech, werden ignoriert. Das Forum existiert.
      2. @@Cube:

        nuqneH

        Hab ich nen Denkfehler drin oder unterstützt col den box-shadow nicht?

        Letzteres würde ich denken. Da heben Browser wohl einen Implementierungsfehler drin, denn laut Spec sollte es ja wie gesagt funktionieren.

        Kein Schatten in Chrome (Webkit) und Firefox (Gecko). Getrennte Schatten für die Tabellenzellen (WTF?) in Opera 12.15 (Presto).

        http://dabblet.com/gist/5683896

        Qapla'

        --
        „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer) Da haben
  2. Om nah hoo pez nyeetz, Cube!

    Gibt es eine relativ simple Lösung, um mit box-shadow die letzte Spalte zu verschatten?

    imho nein. Du müsstest colgroup und col verwenden, aber da das keine "echten" Elemente sind, sondern Referenzen und zudem die Zeilen in z-Richtung darüber liegen, wird das nicht funktionieren.

    Matthias

    --
    Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Che und Cher.

    1. @@Matthias Apsel:

      nuqneH

      Du müsstest colgroup und col verwenden, aber da das keine "echten" Elemente sind, sondern Referenzen

      ??

      und zudem die Zeilen in z-Richtung darüber liegen, wird das nicht funktionieren.

      Das ist keine Begründung. Hintergrundfarbe für Spalten funktioniert ja auch.

      Schatten aber nicht, hm. Die Spec sagt: „Applies to: all elements“.

      Qapla'

      --
      „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
      1. Schatten aber nicht, hm. Die Spec sagt: „Applies to: all elements“.

        Qapla'

        Ahh die Ergänzung hatte ich übersehen und 2 Minuten vorher schon dieselbe Erkenntnis gepostet. Also ist das Box-Shadow-Attribut Schuld? :D
        Gibt's nen Umweg?

      2. Om nah hoo pez nyeetz, Gunnar Bittersmann!

        Du müsstest colgroup und col verwenden, aber da das keine "echten" Elemente sind, sondern Referenzen
        ??

        <populärwissenschaftlich>
        Bei einem "normalen" Element steht der Inhalt zwischen Start- und Endtag. Leere Elemente haben keinen Inhalt, bzw. es wird im Starttag festgelegt, was dargestellt werden soll. Bei col ist das nicht so. Es wird nur für bestimmte th, td festgelegt, du gehörst zu dieser Spalte.
        </populärwissenschaftlich>

        und zudem die Zeilen in z-Richtung darüber liegen, wird das nicht funktionieren.
        Das ist keine Begründung. Hintergrundfarbe für Spalten funktioniert ja auch.

        Ja, aber auch nur wenn die drüberliegenden Elemente transparent sind. http://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Tabellenformatierung/Hintergrund

        Schatten aber nicht, hm.

        und zwar unabhängig von der Tranparenz.

        Matthias

        --
        Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Skat und Skatepark.

        1. und zwar unabhängig von der Tranparenz.

          Matthias

          Womit wir dann meine Hoffnung auf eine einfache Lösung ad acta legen können? Oder gibt andere Ideen/Lösungsansätze?

          1. Om nah hoo pez nyeetz, Cube!

            Womit wir dann meine Hoffnung auf eine einfache Lösung ad acta legen können? Oder gibt andere Ideen/Lösungsansätze?

            ungetestet:

            du könntest mehrere Schatten für table geschickt kombinieren solange der Schatten nur außerhalb sein soll.

            du könntest den td entsprechende Hintergründe verpassen. td:last-child und tr:last-child td:last-child.

            Matthias

            --
            Der Unterschied zwischen Java und JavaScript ist größer als der zwischen übel und Übeltalferner.

  3. Hi,

    ich würde in einer Tabelle die letzte Spalte durch einen Schatten hervorheben. Wenn ich jetzt td:last-child nutze, wird es natürlich kein durchgehender Schatten für die gesamte Spalte sondern nur für jede Zelle einzeln.

    Spricht was dagegen, den Schatten rechts an die Tabelle zu kleben? Denn wenn er rechts von der letzten Spalte klebt, klebt er doch eh rechts an der Tabelle.

    cu,
    Andreas

    --
    Warum nennt sich Andreas hier MudGuard?
    O o ostern ...
    Fachfragen per Mail sind frech, werden ignoriert. Das Forum existiert.