[[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 weblapokat, ahol az adatokat 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 }}
        
        
      
    
  }

===== JavaScript és Bootstrap kártyák =====


  
    Járművek


const cars = [
  {
    id: 1,
    plate: 'ABC123',
    name: 'Ford',
    model: 'Mustang',
    year: 2022
  },
  {
    id: 2,
    plate: 'DEF456',
    name: 'BMW',
    model: 'X5',
    year: 2021
  },
  {
    id: 3,
    plate: 'GHI789',
    name: 'Toyota',
    model: 'Camry',
    year: 2020
  },
  {
    id: 4,
    plate: 'JKL012',
    name: 'Honda',
    model: 'Civic',
    year: 2019
  },
  {
    id: 5,
    plate: 'MNO345',
    name: 'Nissan',
    model: 'Altima',
    year: 2018
  }
]

const template = (car) => {
  return `
    
      
      
        ${car.name}
        
          ${car.model}
        
        
          ${car.year}
        
        
          ${car.plate}
        
      
    
  `
}

const carsContainer = document.getElementById('cars')
cars.forEach(car => {
  carsContainer.innerHTML += template(car)
})