< Web

Reszponzív

Szerző: Sallai András

Copyright © 2025, Sallai András

Licenc: CC BY-SA 4.0

Web: https://szit.hu

Táblázat celláinak tördelése

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

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

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.

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