HTML5 + CSS3 logó
  WEBFEJLESZTÉS, WEBÁRUHÁZ KÉSZÍTÉS   Ingyenes elektronikus tananyag interaktív
weboldalak készítéséhez.
Custom Search
 
vissza VISSZA    
menü MENÜ    
ismét ISMÉT    
tovább TOVÁBB    

Responsive táblázatok


HTML5-ben a táblázatok szerepe az adatok áttekinthető módon történő közzététele.

Kis felbontású megjelenítő eszköz esetén azonban a szokásos táblázatos felépítés nem használható. Erre nézünk egy lehetséges megoldást.

A HTML kód módosítása:

  1. Fontos, hogy szabványos táblázat fejlécet használjunk, ami külön kezelhető!
  2. Egy-egy oszlop fejlécének szövegét elhelyezzük minden további cellájának alt jellemzőjében.

A CSS kód módosítása:

  1. A táblázat minden elemének display tulajdonságát block-ra módosítjuk.
  2. Elrejtjük a fejlécet.
  3. A cellák ekkor egymás alatt kerülnek megjelenítésre.
  4. A cellák alt jellemzőjének értékét megjelenítjük a cellatartalom előtt.

Az alap elkészült. A táblázat ízlés szerint tovább formázható.

1. Példa:

Forráskód


...
<style type="text/css"> 
...
  /* A táblázat felbontásfüggő beállítása */
@media only screen and (max-width: 360px) {
  #tartalom table,
  #tartalom thead,
  #tartalom tbody,
  #tartalom th,
  #tartalom td,
  #tartalom tr {display: block; border:0;}
  #tartalom table {width:180px; padding:0px;}
  #tartalom th {position: absolute; top: -9999px; left: -9999px;}
  #tartalom td {border: none; position: relative; 
                padding-left: 50%;  text-align:left;
                white-space: normal;}
  #tartalom td:before {position: absolute; top: 2px; left: 6px; width: 45%; 
                       padding-right: 10px; white-space: nowrap; 
                       text-align:left; font-weight: bold; }
  #tartalom td:before { content: attr(title); }  
}
</style>   ....
<body>
...
<table class='ResponsiveTable'>
  <tr>
    <th> Terméknév</th>
    <th> Kód </th>
    <th> Ár </th>
  </tr>
  <tr>
    <td title='Terméknév'> 1. termék</td>
    <td title='Kód'> KOD01</td>
    <td title='Ár'> 12345 Ft</td>
  </tr>
  <tr>
    <td title='Terméknév'> 2. termék</td>
    <td title='Kód'> KOD02</td>
    <td title='Ár'> 33333 Ft</td>
  </tr>
  <tr>
    <td title='Terméknév'> 3. termék</td>
    <td title='Kód'> KOD03</td>
    <td title='Ár'> 98765 Ft</td>
  </tr>

</table> 
   
...
</body> 

Eredmény*

Eredmény*


* Az eredmény megjelenítése az Ön által használt böngészőtől függ.
A példakód külön ablakban is megtekinthető: responzive_tabla_webaruhaz.html