szit

Felhasználói eszközök

Eszközök a webhelyen

Itt vagy: start » oktatas » web » reszponziv
Nyomvonal:
oktatas:web:reszponziv

Különbségek

A kiválasztott változat és az aktuális verzió közötti különbségek a következők.

Összehasonlító nézet linkje

Előző változat mindkét oldalonElőző változat
Következő változat		Előző változat
oktatas:web:reszponziv [2025/04/13 00:08] – [Táblázat celláinak tördelése] adminoktatas:web:reszponziv [2025/04/13 10:52] (aktuális) – [Szebb tördelés] admin
Sor 7: Sor 7:
   * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|CC BY-SA 4.0]]   * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|CC BY-SA 4.0]]
   * Web: https://szit.hu   * Web: https://szit.hu
 +
 +===== Bevezetés =====
 +
 +Hogyan tegyük reszponzívvá az olyan adatokat, amelyeket általában táblázatban 
 +vagy táblázatszerűen jelenítünk meg?
 +
  
 ===== Táblázat celláinak tördelése ===== ===== Táblázat celláinak tördelése =====
 +
 +Az egyik lehetőség, ha maradunk a táblázatnál, de a táblázat részeit block típusúvá alakítjuk.
 +
 +A lényeg:
  
 <code css style.css> <code css style.css>
Sor 20: Sor 30:
 </code> </code>
  
 +600 pixel alatt a táblázat részeinek display értéke legyen block típus.
 +
 +De így nem látszanak a határok és a táblázat fejléce is felesleges. Tegyünk még néhány kiegészítést.
  
  
Sor 46: Sor 59:
 </code> </code>
  
 +==== Mezők feliratozása ====
 +
 +Ha szeretnénk a tördelt mezők számára mezőneveket megjeleníteni adjunk minden cellához egy **data-column** mezőt a megfelelő mezőnévvel.
 +
 +<code html>
 +<tbody>
 +  <tr>
 +    <td data-column="Név">Arany Ernő</td>
 +    <td data-column="Település">Szeged</td>
 +    <td data-column="Fizetés">397</td>
 +  </tr>
 +  <tr>
 +    <td data-column="Név">Taba Mária</td>
 +    <td data-column="Település">Pécs</td>
 +    <td data-column="Fizetés">395</td>
 +  </tr>
 +</tbody>
 +</code>
 +
 +
 +A feliratok megjelenítése ezek után:
 +
 +<code css>
 +@media screen and (max-width: 600px) {
 +
 +  /* ... */
 +  td:before {
 +    content: attr(data-column);
 +    float: left;
 +    font-weight: bold;
 +  }
 +
 +}
 +</code>
 +
 +==== Szebb tördelés ====
 +
 +<code css>
 +@media screen and (max-width: 600px) {
 +
 +  table, thead, tbody, th, td, tr {
 +    display: block;
 +  }
 +
 +  thead tr {
 +    display: none;
 +  }
 +
 +  td {
 +    border: none;
 +    border-bottom: 1px solid #eee;
 +    position: relative;
 +    padding-left: 50%;
 +  }
 +
 +  td:before {
 +    position: absolute;
 +    top: 6px;
 +    left: 6px;
 +    width: 45%;
 +    padding-right: 10px;
 +    white-space: nowrap;
 +    content: attr(data-column);
 +    font-weight: bold;
 +  }
 +
 +}
 +</code>
 +
 +{{:oktatas:web:tort_tablazat_02.png|}}
 ===== Bootstrap kártyák ===== ===== Bootstrap kártyák =====
  
oktatas/web/reszponziv.1744495737.txt.gz · Utolsó módosítás: 2025/04/13 00:08 szerkesztette: admin