Dinamikus méretű táblázat ablaktól függően, fix (A*A) méretarányú cellákkal
2021-05-30T08:57:34+02:00
2021-05-31T12:27:32+02:00
2022-08-12T03:00:30+02:00
Lufika
Sziasztok!

Van egy 7 x 7-es táblázatom, melynek a cellái A x A, tehát négyzet alakú.

Azt szeretném megoldani HTML és CSS használatával, hogy a böngészőablak méretéhez igazodjon a táblázat mérete (töltse ki maximális helyet) úgy, hogy a cellák méretaránya megmaradjon, azaz, az A x A cellaméretarány ne változzon meg.

Miként oldható ez meg?

Várom segítő javaslataitokat!

Köszönöm szépen!
Mutasd a teljes hozzászólást!
Hali!

Miként oldható ez meg?

Ha mindenképpen táblázattal szeretnéd megoldani (és nem pl. flexbox-szal), akkor megoldás lehet relatív CSS-egységek használata a táblázat méretének megadásánál. Ezek közül is a vmin, ami a böngésző (nézet) méretei közül a kisebbik 1%-át adja meg (tehát, a 100vmin a kisebbik méretet). Nem kell mást tenned, mint a táblázat szélességének és magasságának ezt a méretet adod meg:
table { border-collapse: collapse; border: 0px solid transparent; width: 100vmin; height: 100vmin; }
Működés közben: JSFiddle.

Mutasd a teljes hozzászólást!

  • td{ border: 1px solid #dddddd; width:calc((100vw / 7) - 2px); height:calc((100vw / 7) - 2px); } <table> <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> </table>
    Mutasd a teljes hozzászólást!
abcd