Responsive tabela

Imam eno tabelo (vremenska napoved), ki se na mobilnih napravah prikazuje tako (da se vidi samo del tabele):

Zdaj bi želel to tabelo narediti prijazno mobilnim napravam, torej da bi izgledalo tako:

Sem pogooglal že kar precej virov, pa mi nikakor ne uspe. Hvala za pomoč.

4 odgovori

Mogoče s pomočjo bootstrap responsive tables?
Integriraš samo del bootstrap, ki skrbi za tabele, popraviš kodo in vidiš odziv.
http://v4-alpha.getbootstrap.com/content/tables/#responsive-tables

http://www.w3schools.com/bootstrap/tryit.asp?filename=trybsreftable-responsive&stacked=h

Gregor9:
Imam eno tabelo (vremenska napoved), ki se na mobilnih napravah prikazuje tako (da se vidi samo del tabele):

Zdaj bi želel to tabelo narediti prijazno mobilnim napravam, torej da bi izgledalo tako:

Sem pogooglal že kar precej virov, pa mi nikakor ne uspe. Hvala za pomoč.

Pazi, da ne bodo podatki premali, da bodo berljivi na zaslonu telefona.

Drugače pa naredi css stil za mobilnike in notri definiraš vsako posamezno polje (širino, veliksot pisave itd.).

Primer na hitro:

@media only screen and (max-width: 500px) {
    td {
        font-size: 10px;
    }
}

Super, hvala!

Meni najljubša verzija responsive tabel - http://zurb.com/playground/responsive-tables

Če nimaš dovolj podatkov, potem si lahko privoščiš kaj takega - https://css-tricks.com/responsive-data-tables/

2