Diskuze: Responzivní tabulka

V předchozím kvízu, Online test znalostí HTML a CSS, jsme si ověřili nabyté zkušenosti z kurzu.

Člen

sp:25.11.2016 10:02

Můžete mi prosím někdo poradit s formátováním tabulky pro menší okna? Mám tabulku se čtyřmi sloupci. Potřebuju, aby v menší okně se každý řádek tabulky rozdělil jakoby na dvě části - v první budou první tři sloupce a v druhé ten poslední. A chci, aby se vždy zobrazily první tři sloupce tabulky a pod ně ten čtvrtý a zase další řádek stejně. Nemáte tipy, jak na to? Díky!

Odpovědět

25.11.2016 10:02

Lava

Člen

Lava:25.11.2016 10:22

@media screen and (max-width:600px) /*alebo nejaký tvoj počet pixelov*/
{
table td {
display:block;
}
}

Nahoru Odpovědět

25.11.2016 10:22

Aspartám, sacharín, to je môj vitamín

Člen

sp:25.11.2016 11:22

Tohle jsem zkoušela, ale naháže mi to pod sebe úplně všechno.

Nahoru Odpovědět

25.11.2016 11:22

Jiří Fencl

Člen

Jiří Fencl:25.11.2016 12:43

zkuste trosku vlastni inovace - "samo" se to neudela...

@media screen and (max-width: XXXpx){
 table td {
  display:block;
  float: left;
  width: 33.333%;
 }
  table td+td+td+td {
  width: 100%;
  clear: both;
 }
}

Editováno 25.11.2016 12:44

Nahoru Odpovědět

25.11.2016 12:43

Lava

Člen

Lava:25.11.2016 14:47

To je jasné, tak si daj inline-block a porozdeľuj si šírku na percentá tak, aby ti to vyšlo ako chceš... teda podľa toho, koľko chceš buniek vedľa seba daj príslušnú cifru v percentách... ak chceš dve bunky, daj 50%. Použi border-box a rátaj aj s marginmi

Akceptované řešení
+20 Zkušeností
+2,50 Kč

Nahoru Odpovědět

25.11.2016 14:47

Aspartám, sacharín, to je môj vitamín

Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 5 zpráv z 5.