Schatten hinter letzte Tabellenspalte legen
Cube
- css
0 Gunnar Bittersmann0 Cube
0 Matthias Apsel0 Gunnar Bittersmann0 Cube0 Matthias Apsel0 Cube
0 MudGuard
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
@@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'
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>
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
@@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'
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
@@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'
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?
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
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?
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
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