[[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 ===== Táblázat celláinak tördelése ===== A lényeg:


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

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

}

De így nem látszanak a határok és a táblázat fejléce is felesleges.


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

}

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