Responzivny dizajn pri table - colspan

JanoF · Napísal **JanoF**: 24.06.2015 8:45

Moc s css nerobim, takze musim polozit otazku ako spravit v css responzivny dizajn ak pouzivam table a v nom je pouzity colspan=7 a pri schovani 3 stlpcov aby bolo pouzite colspan=4, neviem ci som to dobre napisal. Tu mam priklad: http://www.pcforum.sk/test/

ie s tym zjavne problem nema, ale chrome, ff, a mozila ano, pri kazdom schovani stlpcov je na konci tabulky vidiet

//ano viem, tabulkovu sablonu v tejto dobe, ale urcite to prerabat nebudem

chrono · Napísal **chrono**: 24.06.2015 12:32

V Chromiu a Firefox sa mi to zobrazuje normálne, každopádne generický WebKit prehliadač zobrazuje riadky so skrytými stĺpcami o pár pixlov kratšie. Ak je to, čo je na konci tabuľky vidieť, tak budeš musieť zrušiť cellspacing a tie čiary medzi bunkami budeš musieť vykreslovať inak.

JanoF · Napísal autor témy **JanoF**: 24.06.2015 13:51

Ano zobrazuje sa to normalne, len ff, opera a chrome pri kazdej zmensenine prida jeden pasik, neviem jedine co ma napadlo zmenit pozadie na farbu akou je farba tych tem, ale tak to je take na prd riesenie. Je to preto ze tam je tusim colspan=6, lenze ked je to najmensie tak uz by tam mal byt len colspan=2, napadlo ma ci javascript nieco take nepozna, alebo netusim ako to fixnut. Chcem tu spravit responzivny a zrusit tu mobilnu verziu, prerabat tento vzhlad aby tu neboli tabulky nehrozi, s tym sa mi srat nechce, zmenit vzhlad za nejaky novy moderny, neviem ziadny nejaky perfektny mi nepadol do oka a zas tu budu ti co chcu aj tmavy, cize dalsia robota navyse. Najrychlejsie riesenie mi pride tento prerobit do responzivu, len toto ma zabrzdilo. Ako aj celkom rad by som mozno zmenil cely dizajn fora, ale to je robota zas na rok kym sa to "vysperkuje" aby to bolo dobre, neviem ani ci vobec by bol niekto za.

chrono · Napísal **chrono**: 24.06.2015 16:44

Problém je takmer určite cellspacing="1" (vždy keď sa skryje stĺpec, kvôli collspann chýba o jeden pixel viac, ako zaberie samotný stĺpce). Vyzerá to tak, že by sa to malo dat vyriešiť pomocou css border, každopádne tam treba vyriešiť to, aby sa to používalo len tam, kde sa to použiť má.

Napr pre čiary medzi riadkami by to vyzeralo napr. takto:

Kód:

.tablebg>tbody>tr:>td, .tablebg>tbody>tr>th {
  border-bottom: 1px solid rgb(169, 184, 194);
}
.tablebg>tbody>tr:first-child>td, .tablebg>tbody>tr:first-child>th {
  border-top: 1px solid rgb(169, 184, 194);
}

a pre stĺpce napr. takto:

Kód:

.tablebg>tbody>tr>td, .tablebg>tbody>tr>th {
  border-right: 1px solid rgb(169, 184, 194);
}
.tablebg>tbody>tr>td:first-child, .tablebg>tbody>tr>th:first-child {
  border-left: 1px solid rgb(169, 184, 194);
}

(samozrejme je potrebné nastaviť cellspacing na 0 a netuším, ako to bude vyzerať na iných stránkach)

PS: Ak sa niektoré veci zobrazujú alebo skrývajú pomocou css pri nejakej šírke, zvyčajne sa tie triedy nazývajú hide-lg/show-lg (-md, -sm, -xs), prípadne podobne, aby bolo z názvu hneď zrejmé, čo to robí.

JanoF · Napísal autor témy **JanoF**: 24.06.2015 16:56

Ok dik, skusim, snad sa mi to podari, lebo prerabat tabulkovy layout sa mi veru nechce a chcel by som radsej aby tu bol responzivny dizajn ako ta mobilna verzia, lebo uz aj mne trochu zacina vadit, ze tam plno veci chyba a aj tak je taka spomalena nejaka :-> To uz bola celkom ranna hodina ked som skusal len ze ci to vobec pojde

JanoF · Napísal autor témy **JanoF**: 29.06.2015 18:53

Tak funguje to http://www.pcforum.sk/test/ este sa zbavit hrubych ciar po stranach a mozem to sem nahodit

chrono · Napísal **chrono**: 29.06.2015 19:31

Tabuľka nepotrebuje border, pretože ten sa generuje cez <td> elementy (prípadne môže mať tabuľka okraj, budú sa ale musieť upraviť pravidlá pre td tak, aby sa okraj nezobrazoval na vonkajších hranách).

Mimochodom tie štýly nemôžeš zlúčiť tak, ako si to urobil, pretože jedno má :first-child pre tr alement a druhé má :first-child pre td element (ale tie bez :first-child sa zlúčiť môžu).

JanoF · Napísal autor témy **JanoF**: 29.06.2015 19:34

Jo uz to funguje ako ma

dik, tak snad to tu onedlho spojazdnim

Daron · Napísal **Daron**: 29.06.2015 19:35

Kde je vlastne rozdiel? Mne to pripada uplne identicke ako to, co bezi teraz.

chrono · Napísal **chrono**: 29.06.2015 19:39

JanoF píše:

Jo uz to funguje ako ma

dik, tak snad to tu onedlho spojazdnim

Ešte musíš zmenšiť height pri td.cat z 29px na 27px (pretože teraz sa ten okraj do celkovej výšky nepočíta a ten obrázok pozadia má len 27px, takže sa na spodku tabuliek zobrazuje široký pás).

// Spojený príspevok Pon 29.06.15 19:41

Daron píše:

Kde je vlastne rozdiel? Mne to pripada uplne identicke ako to, co bezi teraz.

Ide o to, že to má vyzerať rovnako, ale keď sa zmenší okno, tak sa automaticky skryjú niektoré stĺpce (a ja by som napr. uprednostnil autor pred počtom zobrazení, ale to sa asi bude riešiť neskôr)

JanoF · Napísal autor témy **JanoF**: 29.06.2015 19:48

ok zmenil som

// Spojený príspevok Pon 29.06.15 19:51

jo prve pojdu zobrazenia a pocet odpovedi, za ta tym autor, ten by sa zobrazil inde a uplne na koniec posledny prispevok

Daron · Napísal **Daron**: 29.06.2015 20:12

Zobrazuje sa mi to inak (rovnako) kvoli inemu ranku? Alebo preco nevidim rozdiel? Jediny rozdiel vidim v tom, ze tema v odkaze je modra a normalne SoVF su tmave, lebo mam tmavy template.

chrono · Napísal **chrono**: 29.06.2015 20:34

Mne tá stránky, pri rôznych šírkach okna, vyzerá takto:
Responzivny dizajn pri table - colspan

Daron · Napísal **Daron**: 29.06.2015 21:20

Dakujem, uz to vidim.

JanoF · Napísal autor témy **JanoF**: 30.06.2015 0:18

chrono, narazil som na dalsi problem, je to ale len na indexe, uz som to tu zacal nahadzovat, tak to snad za tento tyzden spravim cele, pri najmensej sirke to spravi neplechu, nevies v com by mohol byt problem?

// Spojený príspevok Uto 30.06.15 1:32

ok, tak nic, to som uz tiez vyriesil

Responzivny dizajn pri table - colspan

Podobné témy