• Szerző: Sallai András
• Copyright © 2025, Sallai András
• Licenc: CC BY-SA 4.0
• Web: https://szit.hu

Hogyan tegyük reszponzívvá az olyan weblapokat, ahol az adatokat táblázatban vagy táblázatszerűen jelenítünk meg?

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:

style.css

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

style.css

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

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.

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

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

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

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

<div class="d-flex flex-wrap justify-content-center">
  <div class="card" style="width: 18rem;">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Cím</h5>
      <p class="card-text">Leírás</p>
      <a href="#" class="btn btn-primary">Menjünk valahova</a>
    </div>
  </div>
</div>

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.

<div class="d-flex flex-wrap justify-content-center">
  @for(product of productList; track product.id) {
    <div class="card m-3" style="width: 18rem;">
      <img src="{{ product.image }}" class="card-img-top" alt="{{ product.name }}"
      width="50px" height="80px">
      <div class="card-body">
        <h5 class="card-title">{{ product.name }}</h5>
        <p class="card-text">{{ product.description }}</p>
 
        <button
        class="btn btn-primary"
        (click)=toCart(emp)
        >Kosárba</button>
      </div>
    </div>
  }
</div>

index.html

  <div class="container text-center">
    <h1>Járművek</h1>
 
    <div id="cars" 
    class="d-flex flex-wrap justify-content-center">
    </div>
 
  </div>

app.js

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 `
    <div class="card m-3 text-center" style="width: 18rem;">
 
      <div class="card-body">
        <h3 class="card-title">${car.name}</h3>
        <p class="card-text">
          ${car.model}
        </p>
        <p class="card-text">
          ${car.year}
        </p>
        <p class="card-text">
          ${car.plate}
        </p>
      </div>
    </div>
  `
}
 
const carsContainer = document.getElementById('cars')
cars.forEach(car => {
  carsContainer.innerHTML += template(car)
})