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.

table.zebra tr:nth-of-type(even) {
    background: rgba(0,0,0,.2);
}

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

table tr:nth-of-type(even) {
    background: rgba(0,0,0,.2);
}

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 :)

/*
 * Deep linking for Foundation 6 Tabs using Javascript
 *
 * We will check if we have a hash in the page url and if so, use it.
 *
 * By Christian Haensel
 * chris@chaensel.de
 * www.chaensel.de
 * @author     Christian Hänsel <chris@chaensel.de>
 * @copyright  Copyright (c) 2016 by Christian Hänsel
 * @license    https://opensource.org/licenses/MIT MIT License
 */
if(window.location.hash) {
    // We have an anchor link in our URL
    var f6dl_url = window.location.hash;
    var f6dl_hash = f6dl_url.substring(f6dl_url.indexOf("#")+1);
    if($('#'+f6dl_hash).length) {
        // Insert id of the <ul> that holds the links to the tabs
        var f6dl_ulid = 'account-tabs';
        $('#' + f6dl_ulid).find('a').each(function(e) {
            var f6dl_href = $(this).attr('href');
            if(f6dl_href == "#"+f6dl_hash) {
                // Click the link to activate the tab
                $(this).click();
            }
        });

    }
}