Ta prosta tabela nie jest responsywna. Możesz to sprawdzić zmniejszając okno przeglądarki.
| Lorem ipsum 1 | Lorem ipsum 2 | Lorem ipsum 3 | Lorem ipsum 4 | Lorem ipsum 5 | Lorem ipsum 6 | Lorem ipsum 7 |
| 8 | 9 | 10 | 11 | 12 | 13 | 14 |
| 15 | 15 | 17 | 18 | 19 | 20 | 21 |
ale jeśli przetestujesz poniższy kod…
<!DOCTYPE html>
<html lang="pl"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="keywords" content="grid responsywność">
<meta name="description" content="Tabela dopasowuje sie do szerokości ekranu.">
<title>Responsywna tabela - lista sprzętu</title>
<style type="text/css">
/* dla telefonów i tabletów */
div.status {display: none;}
.kontener-grida {grid-template-columns: auto auto auto auto auto;}
.uwiw {grid-row: span 4;}
.sala {grid-column: span 2;}
.kategoria {grid-column: span 2;}
.model {grid-column: span 4;}
.obudowa {grid-column: span 2;}
.data-zakupu {grid-column: span 2;}
.operacje4x {grid-column: span 4;}
.szeroki-div-grida {display: none;}
/* dla wszystkich */
.kontener-grida {display: grid;grid-gap: 1px;background-color: #adadad;padding: 1px;}
.kontener-grida > div {background-color: rgba(255, 255, 255, 0.8);padding: 5px;}
/* dla komputerów */
@media only screen and (min-width: 1200px) {
.kontener-grida {grid-template-columns: auto auto auto auto auto auto auto auto auto auto auto;}
.uwiw {grid-row: span 1;}
.sala {grid-column: span 1;}
.kategoria {grid-column: span 1;}
.model {grid-column: span 1;}
.obudowa {grid-column: span 1;}
.data-zakupu {grid-column: span 1;}
.szeroki-div-grida {grid-column: 1 / span 11; display: block;}
.operacje4x {grid-column: span 4;}
div.status {display: block;}
}
/* dla dużych monitorów */
@media only screen and (min-width: 1300px) {
.kontener-grida {width:1260px; margin:0 auto 0 auto;}
}
.button {
background-color: #868686;border: none;color: white;padding: 3px 2px;
text-align: center;text-decoration: none;display: inline-block;margin: 1px 1px;
cursor: pointer;background-color: white;color: black; border: 1px solid #8b8b8b;
}
</style>
</head>
<body style=" font-family: Yanone, Verdana, sans-serif; font-size:12px; background: #ffffff"><form action="#">
<div class="kontener-grida">
<div class="szeroki-div-grida">
<span style="padding: 10px 0 10px 10px; width:48%; display: inline-block; text-align: left;">
<a href="#operacja=instr" class="button">Instrukcja</a> <a href="#operacja=users" class="button">Użytkownicy</a> <a href="#operacja=device_add" class="button">Dodaj urządzenie</a>
<a href="#n=10000&sort=wiek&uwiw=bezstarych&sala=0&kateg=0&model=0&status=0" class="button">Resetuj filtry</a>
</span>
<span style="padding: 10px 0 10px 0; width:49%; display: inline-block; text-align: right;">Ranga: admin,
użytkownik: maciej
<a href="#operacja=password" class="button">Zmiana hasła</a>
<a href="#operacja=logout" class="button">Wyloguj</a></span>
<span style="padding: 10px 0 10px 10px; width:97%; display: inline-block; text-align: left;"><a href="#operacja=notatki" class="button">Notatki</a> Ilość: <select name="n">
<option value="50">50</option>
<option value="200">200</option>
<option value="800">800</option>
<option value="10000" selected="selected">10 000</option>
</select>
Sortuj wg: <select name="sort">
<option value="sala">sala</option>
<option value="kategoria">kategoria</option>
<option value="wiek" selected="selected">wiek</option>
<option value="uwiw">uwiw</option>
<option value="kasacja">data kasacji</option>
</select>
<input type="checkbox" name="szczeg" checked=""> Szczegóły
<input type="submit" value="Wyświetl" class="button">
</span>
</div>
<div class="uwiw">
Ewidencja</div>
<div class="sala">Sala</div>
<div class="kategoria">Kategoria</div>
<div class="model">Model</div>
<div class="obudowa">Obudowa</div>
<div class="data-zakupu">Data zakupu</div>
<div class="status">Status</div>
<div class="operacje operacje4x">Operacje</div>
<div class="uwiw">UW/8134</div>
<div class="sala">235</div>
<div class="kategoria">monitor</div>
<div class="model">Model: BenQ GW2270<br></div>
<div class="obudowa"></div>
<div class="data-zakupu">2019-02-13</div>
<div class="status">2021-11-09 potwierdzony</div>
<div class="operacje"><a href="#operacja=edit&id=728" class="button">Edytuj</a></div>
<div class="operacje"><a href="#operacja=przen&id=728" class="button">Przenieś</a></div>
<div class="operacje"><a href="#operacja=del&id=728" class="button">Kasacja</a></div>
<div class="operacje"><a href="#operacja=hist&id=728" class="button">Historia</a></div>
<div class="uwiw">UW/7172</div>
<div class="sala">235</div>
<div class="kategoria">monitor</div>
<div class="model">Model: Philips 223V5L<br>Przekątna: 21,5<br></div>
<div class="obudowa">czarny</div>
<div class="data-zakupu">2018-07-01</div>
<div class="status">2021-09-27 potwierdzony</div>
<div class="operacje"><a href="#operacja=edit&id=660" class="button">Edytuj</a></div>
<div class="operacje"><a href="#operacja=przen&id=660" class="button">Przenieś</a></div>
<div class="operacje"><a href="#operacja=del&id=660" class="button">Kasacja</a></div>
<div class="operacje"><a href="#operacja=hist&id=660" class="button">Historia</a></div>
<div class="uwiw">UW/7273</div>
<div class="sala">235</div>
<div class="kategoria">monitor</div>
<div class="model">Model: Philips 223V5L<br>Przekątna: 21,5<br></div>
<div class="obudowa">czarny</div>
<div class="data-zakupu">2018-07-01</div>
<div class="status">2021-09-27 potwierdzony</div>
<div class="operacje"><a href="#operacja=edit&id=659" class="button">Edytuj</a></div>
<div class="operacje"><a href="#operacja=przen&id=659" class="button">Przenieś</a></div>
<div class="operacje"><a href="#operacja=del&id=659" class="button">Kasacja</a></div>
<div class="operacje"><a href="#operacja=hist&id=659" class="button">Historia</a></div>
<div class="uwiw">UW/1796</div>
<div class="sala">235</div>
<div class="kategoria">komputer</div>
<div class="model">Model: stacjonarny i3-4500 MSI-B250<br></div>
<div class="obudowa">czarny Silentium</div>
<div class="data-zakupu">2018-06-27</div>
<div class="status">2021-11-09 potwierdzony</div>
<div class="operacje"><a href="#operacja=edit&id=626" class="button">Edytuj</a></div>
<div class="operacje"><a href="#operacja=przen&id=626" class="button">Przenieś</a></div>
<div class="operacje"><a href="#operacja=del&id=626" class="button">Kasacja</a></div>
<div class="operacje"><a href="#operacja=hist&id=626" class="button">Historia</a></div>
<div class="uwiw">UW/7917</div>
<div class="sala">235</div>
<div class="kategoria">komputer</div>
<div class="model">Model: stacjonarny i3-4500 MSI-B250M<br>Płyta: MSI B250M PRO-VDH</div>
<div class="obudowa">czarny Silentium</div>
<div class="data-zakupu">2018-06-27</div>
<div class="status">2021-11-09 potwierdzony</div>
<div class="operacje"><a href="#operacja=edit&id=625" class="button">Edytuj</a></div>
<div class="operacje"><a href="#operacja=przen&id=625" class="button">Przenieś</a></div>
<div class="operacje"><a href="#operacja=del&id=625" class="button">Kasacja</a></div>
<div class="operacje"><a href="#operacja=hist&id=625" class="button">Historia</a></div>
<div class="uwiw">UW/1761</div>
<div class="sala">235</div>
<div class="kategoria">switch</div>
<div class="model">Model: Tp-Link TL-SG3216<br>Inne: mobilna duża szafa<br></div>
<div class="obudowa"></div>
<div class="data-zakupu">2017-01-01</div>
<div class="status">2018-10-24 potwierdzony</div>
<div class="operacje"><a href="#operacja=edit&id=583" class="button">Edytuj</a></div>
<div class="operacje"><a href="#operacja=przen&id=583" class="button">Przenieś</a></div>
<div class="operacje"><a href="#operacja=del&id=583" class="button">Kasacja</a></div>
<div class="operacje"><a href="#operacja=hist&id=583" class="button">Historia</a></div>
<div class="uwiw">UW/3153</div>
<div class="sala">235</div>
<div class="kategoria">switch</div>
<div class="model">Model: D-Link DGS-1224T <br>Inne: mobilna duża szafa</div>
<div class="obudowa">19'</div>
<div class="data-zakupu">2011-01-01</div>
<div class="status">2019-02-28 potwierdzony</div>
<div class="operacje"><a href="#operacja=edit&id=580" class="button">Edytuj</a></div>
<div class="operacje"><a href="#operacja=przen&id=580" class="button">Przenieś</a></div>
<div class="operacje"><a href="#operacja=del&id=580" class="button">Kasacja</a></div>
<div class="operacje"><a href="#operacja=hist&id=580" class="button">Historia</a></div>
<div class="uwiw">UW/1120</div>
<div class="sala">235</div>
<div class="kategoria">projektor</div>
<div class="model">Model: Benq MP-735<br></div>
<div class="obudowa"></div>
<div class="data-zakupu">2010-12-30</div>
<div class="status">2018-10-23 potwierdzony</div>
<div class="operacje"><a href="#operacja=edit&id=499" class="button">Edytuj</a></div>
<div class="operacje"><a href="#operacja=przen&id=499" class="button">Przenieś</a></div>
<div class="operacje"><a href="#operacja=del&id=499" class="button">Kasacja</a></div>
<div class="operacje"><a href="#operacja=hist&id=499" class="button">Historia</a></div> <div class="szeroki-div-grida">Liość pozycji: 46</div>
</div></form></body></html>Zbuduj swoją responsywną tabelę wykorzystując display: grid; Możesz do tego użyć AI, jednak pamiętaj, że to Ty masz rozumieć kod. Następnie osadź tę tabelę wewnątrz sekcji <article> w „Prostym kodziku #2” z questa HTML i CSS beginner tak by strona wyświetlała się poprawnie zarówno na telefonie, tablecie jak i na komputerze PC
Twój komentarz