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*
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