Különbségek

A kiválasztott változat és az aktuális verzió közötti különbségek a következők.

--- oktatas:web:reszponziv [2025/04/13 00:08] – [Táblázat celláinak tördelése] admin
+++ oktatas:web:reszponziv [2025/04/13 10:52] (aktuális) – [Szebb tördelés] admin
@@ Sor 7: / Sor 7: @@
   * 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:
+<code css style.css>
+@media screen and (max-width: 600px) {
+  table, thead, tbody, th, td, tr {
+    display: block;
+  }
+}
+</code>
+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.
 <code css style.css>
@@ Sor 34: / Sor 59: @@
 </code>
+==== 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.
-<code css style.css>
+<code html>
+<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>
+</code>
+A feliratok megjelenítése ezek után:
+<code css>
+@media screen and (max-width: 600px) {
+  /* ... */
+  td:before {
+    content: attr(data-column);
+    float: left;
+    font-weight: bold;
+  }
+}
+</code>
+==== Szebb tördelés ====
+<code 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;
   }
@@ Sor 53: / Sor 107: @@
   }
-  tbody tr {
+  td {
-    margin-bottom: 8px;
+    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;
   }
@@ Sor 60: / Sor 128: @@
 </code>
+{{:oktatas:web:tort_tablazat_02.png|}}
 ===== Bootstrap kártyák =====