Responsive órarend, nem csak Wordpress oldalakra

Egy fitness terem órarendéjt kellett mobil eszközökön is olvashatóan megjeleníteni. Több megoldás is létezik a táblázatok responsive alakítására, de egy órarend esetében a zurb.com-on leírt módszert találtam a legjobbnak.

A "Download the Code"-ra kattintva töltsük el.

A letöltött zip fájlból a következő fájlokat/mappákat másoljuk az FTP tárhelyünkön abba a mappába ahol a a sablonunk header.php fájla van:

responsive-tables.css
responsive-tables.js
stylesheets (teljes tartalmát)
javascripts (csak a jquery.min.js fájlt hagyjuk meg, a többit törüljük)

Ez után a sablonunk header.php fájlába másoljuk bea head részbe a következő sorokat:
<link rel="stylesheet" href="stylesheets/globals.css">
<link rel="stylesheet" href="stylesheets/typography.css">
<link rel="stylesheet" href="stylesheets/grid.css">
<link rel="stylesheet" href="stylesheets/ui.css">
<link rel="stylesheet" href="stylesheets/forms.css">
<link rel="stylesheet" href="stylesheets/orbit.css">
<link rel="stylesheet" href="stylesheets/reveal.css">
<link rel="stylesheet" href="stylesheets/mobile.css">
<link rel="stylesheet" href="stylesheets/app.css">
<link rel="stylesheet" href="responsive-tables.css">
<script src="javascripts/jquery.min.js"></script>
<script src="responsive-tables.js"></script>

Utolsó lépés, hogy az órarend táblázatunknak adjuk meg a következő osztályt:
<table class="responsive">

Ha minden jól csináltunk akkor a a végeredmény ilyen.

Asztali képernyőn:

Mobil eszközön:

Élőben az Iridium Fitness honlapján nézhetitek meg.

Ha nem müködnek, akkor érdemes a .css és .js fájloknak a teljes elérést megadni.