Responsive táblázatok - WEBFEJLESZTÉS, WEBÁRUHÁZ KÉSZÍTÉS

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:

Fontos, hogy szabványos táblázat fejlécet használjunk, ami külön kezelhető!
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:

A táblázat minden elemének display tulajdonságát block-ra módosítjuk.
Elrejtjük a fejlécet.
A cellák ekkor egymás alatt kerülnek megjelenítésre.
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*

* 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