Responsiivinen taulukko

Lukkarin tekstieditorin Taulu-työkalulla voi luoda taulukoita, mutta oletuksena ne eivät ole mobiiliystävällisiä eli responsiivisia. On kaksi tapaa tehdä responsiivisia taulukoita: lisäämällä Taulu-työkalulla luodulle <table>-taulukolle erityistyylimääreitä tai tekemällä taulukon manuaalisesti <div>-elementtien avulla.

Muistakaa, ettei taulukko ole lähtökohtaisesti saavutettava ja siksi kannattaa välttää taulukkojen käyttöä nettisivuilla.

Responsiivinen taulukko <table>-elementin tyylimääreitä muuttamalla

Muokkaamaton taulukko:

eka rivi, solu 1 eka rivi, solu 2
toka rivi, solu 1 toka rivi, solu 2
kolmas rivi, solu 1 kolmas rivi, solu 2

 

Muokattu taulukko (eron huomaa selainikkunaa pienentämällä) :

eka rivi, solu 1 eka rivi, solu 2
toka rivi, solu 1 toka rivi, solu 2
kolmas rivi, solu 1 kolmas rivi, solu 2

 

Muokatun taulukon koodi:

<table border="1" cellpadding="1" cellspacing="1" class="responsive_table">
...
</table>
<style type="text/css">
 .responsive_table{width:100%;max-width:500px !important;}
@media screen and (max-width: 480px) {
.responsive_table,   .responsive_table tbody, .responsive_table tr, .responsive_table td{border:none;display:block;}
.responsive_table tr td:last-child{margin-bottom:10px;}
}
</style>

 

Responsiivinen taulukko <div>-elementtien avulla

Lukkarissa on mahdollista hyödyntää Bootrstap-frameworkin tarjoamia tyyliluokkia. Ohessa muutamia esimerkkejä siitä, miten esim. reponsiivisen taulukon voi rakentaa <div>-elementtien ja Bootsrap-grid tyyliluokkien avulla. Gridissä sivun leveys on jaettu 12 palstaan, jotka voidaan esittää erikseen tai yhdistettynä.

Lyhyt selostus esimerkeissä käytetyistä tyyliluokista:

<div class="row"> - määrittelee rivi-elementin, jonka sisällä voi olla haluttu määrä taulukoita
<div class="col-md-6"> - määrittelee palsta-elementin, jonka leveys on 50% tietokoneen näytöllä. HUOM! Jotta gridi toimisi oikein, tulee palstojen yhteissumma joka rivillä olla 12.
<div class="col-md-8"> - määrittelee solu-elementin, jonka leveys on 66.6% tietokoneen näytöllä
<div class="col-md-4"> - määrittelee solu-elementin, jonka leveys on 33.3% tietokoneen näytöllä

Palsta, jonka leveys on "col-md-xx", muuttuu tablet- ja mobiilinäkymässä automaattisesti 100% leveäksi. Jos halutaan, että palsta muuttuu 100% leveäksi vain mobiilikoossa, voi käyttää palstan määrittelyssä sm-tunnistetta md-tunnisteen sijaan, esim. "col-sm-6".

 

Esimerkkitaulukko 1

eka rivi, solu 1
eka rivi, solu 2
toka rivi, solu 1
toka rivi, solu 2
toka rivi, solu 3

 

Tämän taulukon koodi:

<div class="taulukko">
<div class="row">
<div class="col-md-6">eka rivi, solu 1</div>
<div class="col-md-6">eka rivi, solu 2</div>
</div>
<div class="row">
<div class="col-md-4">toka rivi, solu 1</div>
<div class="col-md-4">toka rivi, solu 2</div>
<div class="col-md-4">toka rivi, solu 3</div>
</div>
</div>

Esimerkkitaulukko 2

Taulukkojen <div class="row">-elementeille voi antaa myös lisämääreitä, esim. jos rivin taustaväri halutaan korostaa.

eka rivi, solu 1
eka rivi, solu 2
toka rivi, solu 1
toka rivi, solu 2
kolmas rivi, solu 1
kolmas rivi, solu 2

 

Tämän taulukon koodi:

<div class="taulukko">
<div class="row">
<div class="col-md-8">eka rivi, solu 1</div>
<div class="col-md-4">eka rivi, solu 2</div>
</div>
<div class="row harmaa">
<div class="col-md-8">toka rivi, solu 1</div>
<div class="col-md-4">toka rivi, solu 2</div>
</div>
<div class="row">
<div class="col-md-8">kolmas rivi, solu 1</div>
<div class="col-md-4">kolmas rivi, solu 2</div>
</div>
</div>

 

Lisätietoa Bootstrap gridistäLinkki avautuu uudessa välilehdessä

Sinulla ei ole tarvittavia rooleja tähän portlettiin.