[[oktatas:web|< Web]] ====== Reszponzív ====== * **Szerző:** Sallai András * Copyright (c) 2025, Sallai András * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|CC BY-SA 4.0]] * 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 ===== 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:


@media screen and (max-width: 600px) {

  table, thead, tbody, th, td, tr {
    display: block;
  }

}

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.


@media screen and (max-width: 600px) {

  table, thead, tbody, th, td, tr {
    display: block;
  }

  td {
    text-align: left;
    border: 1px solid #ddd;
    padding: 8px;
  }

  thead tr {
    display: none;
  }

  tbody tr {
    margin-bottom: 8px;
  }

}

==== 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.



  
    Arany Ernő
    Szeged
    397
  
  
    Taba Mária
    Pécs
    395

A feliratok megjelenítése ezek után:


@media screen and (max-width: 600px) {

  /* ... */
  td:before {
    content: attr(data-column);
    float: left;
    font-weight: bold;
  }

}

==== Szebb tördelés ====


@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;
  }

}

{{:oktatas:web:tort_tablazat_02.png|}} ===== Bootstrap kártyák ===== Érdemes kártyákat használni táblázatok helyett. Használjuk a **Card** komponenst. A kártyakomponenseket tegyük egy divbe, majd állítsunk be d-flex és felx-wrap osztályjelölöket.



  
    
    
      Cím
      Leírás
      Menjünk valahova

==== Angularban ==== Legyen Angualrban egy productList, amit szeretnénk renderelni a weboldalra. Készítsünk egy div-t, aminek a dispaly tulajdonságát flex értékre állítjuk, majd mondjuk meg, hogy tördelje a tartalmat ha szükséges a flex tulajdonság wrap-ra állításával.



  @for(product of productList; track product.id) {
    
      
      
        {{ product.name }}
        {{ product.description }}
        
        
      
    
  }