striped tables mit css3

Striped Tables mit CSS

Heute mal eine ganz kleine, aber doch brauchbare Hilfestellung für den alltäglichen Einsatz:

Gestreifte Tabellen mit CSS

Gestreifte Tabellen, auch „striped tables“ oder „Zebra-Tabellen“ genannt, können ganz einfach mit dem CSS-Selektor nth-of-type umgesetzt werden.

Mit dem folgenden CSS-Code können alle Tabellen mit der Klasse „zebra“ gestreift dargestellt werden. Der Selektor sorgt dafür, dass alle geraden (also 2., 4., 6., usw.) Zeilen farbig hinterlegt werden.

Wer alle Tabellen so darstellen möchte, entfernt einfach die Klasse „.zebra“ aus dem CSS. Dann sieht das ganze so aus:

Und so sieht dann die Tabelle aus.

striped tables mit css3
Striped Tables mit CSS3

Foundation 6 Tabs by URL anchor link / deep_linking

If you are trying to use the Foundation 6 (Foundation for Sites) Tabs with deep_linking: true, as it says in the documentation, you are in for a bad surprise.

Foundation 6 Tab deep-linking is not yet supported.

As a workaround, I have put up a little bit of Javascript to be used to deeplink to the tabs by the URL anchor hash.

Even Zurb Foundation has sent people to my page to use this workaround until they fix it :)

I have put this up on Github as well so you can make it better :)