[ Príspevkov: 15 ] 
AutorSpráva
Offline

Prevádzkovateľ fóra
Prevádzkovateľ fóra
Responzivny dizajn pri table - colspan

Registrovaný: 01.05.05
Príspevky: 13412
Témy: 1494 | 1494
Bydlisko: Bratislava
NapísalOffline : 24.06.2015 8:45 | Responzivny dizajn pri table - colspan

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 :)


_________________
Streacom DA2 | SilverStone Titanium SX800-LTI 800W | ASRock X299E-ITX/ac | Intel Core i9-9980XE & be quiet! Dark Rock TF | Kingston HyperX Impact 64 GB DDR4 2666 MHz | NVIDIA Titan RTX 24 GB | Intel SSD Optane 905P 480 GB NVMe U.2 & Intel SSD 750 1,2 TB NVMe U.2 & Intel SSD 660p 2 TB NVMe M.2 & Seagate BackUp Plus Portable 56 TB USB | 55" 4K OLED Dell Alienware AW5520QF | Ergotron LX Wall Mount Keyboard Arm | Logitech Craft | Logitech G603 | Logitech F710 | Harman Kardon Sabre SB 35 & Sennheiser RS 175 | Microsoft Windows 11 Enterprise | APC Back-UPS BE-850 VA | Lenovo ThinkPad X250 & Microsoft Windows 11 Professional | iPhone 15 Pro 256 GB & Pitaka Aramid | SilverStone ML05B Milo | Corsair SF600 SFX 600W | ASRock X99E-ITX/ac | Intel Xeon E5-2683 v4 & NOCTUA NH-L12S | Kingston HyperX Savage 32 GB DDR4 2400 MHz | NVIDIA GeForce GT 710 1 GB | Intel SSD Optane Memory 32 GB NVMe M.2 & Intel SSD 730 240 GB SATA | Ubuntu 24.04.1 LTS
Offline

Skúsený užívateľ
Skúsený užívateľ
Obrázok užívateľa

Registrovaný: 13.11.07
Prihlásený: 20.08.16
Príspevky: 1702
Témy: 0 | 0
NapísalOffline : 24.06.2015 12:32 | Responzivny dizajn pri table - colspan

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.


Offline

Prevádzkovateľ fóra
Prevádzkovateľ fóra
Responzivny dizajn pri table - colspan

Registrovaný: 01.05.05
Príspevky: 13412
Témy: 1494 | 1494
Bydlisko: Bratislava
Napísal autor témyOffline : 24.06.2015 13:51 | Responzivny dizajn pri table - colspan

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.


_________________
Streacom DA2 | SilverStone Titanium SX800-LTI 800W | ASRock X299E-ITX/ac | Intel Core i9-9980XE & be quiet! Dark Rock TF | Kingston HyperX Impact 64 GB DDR4 2666 MHz | NVIDIA Titan RTX 24 GB | Intel SSD Optane 905P 480 GB NVMe U.2 & Intel SSD 750 1,2 TB NVMe U.2 & Intel SSD 660p 2 TB NVMe M.2 & Seagate BackUp Plus Portable 56 TB USB | 55" 4K OLED Dell Alienware AW5520QF | Ergotron LX Wall Mount Keyboard Arm | Logitech Craft | Logitech G603 | Logitech F710 | Harman Kardon Sabre SB 35 & Sennheiser RS 175 | Microsoft Windows 11 Enterprise | APC Back-UPS BE-850 VA | Lenovo ThinkPad X250 & Microsoft Windows 11 Professional | iPhone 15 Pro 256 GB & Pitaka Aramid | SilverStone ML05B Milo | Corsair SF600 SFX 600W | ASRock X99E-ITX/ac | Intel Xeon E5-2683 v4 & NOCTUA NH-L12S | Kingston HyperX Savage 32 GB DDR4 2400 MHz | NVIDIA GeForce GT 710 1 GB | Intel SSD Optane Memory 32 GB NVMe M.2 & Intel SSD 730 240 GB SATA | Ubuntu 24.04.1 LTS
Offline

Skúsený užívateľ
Skúsený užívateľ
Obrázok užívateľa

Registrovaný: 13.11.07
Prihlásený: 20.08.16
Príspevky: 1702
Témy: 0 | 0
NapísalOffline : 24.06.2015 16:44 | Responzivny dizajn pri table - colspan

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í. :)


Offline

Prevádzkovateľ fóra
Prevádzkovateľ fóra
Responzivny dizajn pri table - colspan

Registrovaný: 01.05.05
Príspevky: 13412
Témy: 1494 | 1494
Bydlisko: Bratislava
Napísal autor témyOffline : 24.06.2015 16:56 | Responzivny dizajn pri table - colspan

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 :)


_________________
Streacom DA2 | SilverStone Titanium SX800-LTI 800W | ASRock X299E-ITX/ac | Intel Core i9-9980XE & be quiet! Dark Rock TF | Kingston HyperX Impact 64 GB DDR4 2666 MHz | NVIDIA Titan RTX 24 GB | Intel SSD Optane 905P 480 GB NVMe U.2 & Intel SSD 750 1,2 TB NVMe U.2 & Intel SSD 660p 2 TB NVMe M.2 & Seagate BackUp Plus Portable 56 TB USB | 55" 4K OLED Dell Alienware AW5520QF | Ergotron LX Wall Mount Keyboard Arm | Logitech Craft | Logitech G603 | Logitech F710 | Harman Kardon Sabre SB 35 & Sennheiser RS 175 | Microsoft Windows 11 Enterprise | APC Back-UPS BE-850 VA | Lenovo ThinkPad X250 & Microsoft Windows 11 Professional | iPhone 15 Pro 256 GB & Pitaka Aramid | SilverStone ML05B Milo | Corsair SF600 SFX 600W | ASRock X99E-ITX/ac | Intel Xeon E5-2683 v4 & NOCTUA NH-L12S | Kingston HyperX Savage 32 GB DDR4 2400 MHz | NVIDIA GeForce GT 710 1 GB | Intel SSD Optane Memory 32 GB NVMe M.2 & Intel SSD 730 240 GB SATA | Ubuntu 24.04.1 LTS
Offline

Prevádzkovateľ fóra
Prevádzkovateľ fóra
Responzivny dizajn pri table - colspan

Registrovaný: 01.05.05
Príspevky: 13412
Témy: 1494 | 1494
Bydlisko: Bratislava
Napísal autor témyOffline : 29.06.2015 18:53 | Responzivny dizajn pri table - colspan

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


_________________
Streacom DA2 | SilverStone Titanium SX800-LTI 800W | ASRock X299E-ITX/ac | Intel Core i9-9980XE & be quiet! Dark Rock TF | Kingston HyperX Impact 64 GB DDR4 2666 MHz | NVIDIA Titan RTX 24 GB | Intel SSD Optane 905P 480 GB NVMe U.2 & Intel SSD 750 1,2 TB NVMe U.2 & Intel SSD 660p 2 TB NVMe M.2 & Seagate BackUp Plus Portable 56 TB USB | 55" 4K OLED Dell Alienware AW5520QF | Ergotron LX Wall Mount Keyboard Arm | Logitech Craft | Logitech G603 | Logitech F710 | Harman Kardon Sabre SB 35 & Sennheiser RS 175 | Microsoft Windows 11 Enterprise | APC Back-UPS BE-850 VA | Lenovo ThinkPad X250 & Microsoft Windows 11 Professional | iPhone 15 Pro 256 GB & Pitaka Aramid | SilverStone ML05B Milo | Corsair SF600 SFX 600W | ASRock X99E-ITX/ac | Intel Xeon E5-2683 v4 & NOCTUA NH-L12S | Kingston HyperX Savage 32 GB DDR4 2400 MHz | NVIDIA GeForce GT 710 1 GB | Intel SSD Optane Memory 32 GB NVMe M.2 & Intel SSD 730 240 GB SATA | Ubuntu 24.04.1 LTS
Offline

Skúsený užívateľ
Skúsený užívateľ
Obrázok užívateľa

Registrovaný: 13.11.07
Prihlásený: 20.08.16
Príspevky: 1702
Témy: 0 | 0
NapísalOffline : 29.06.2015 19:31 | Responzivny dizajn pri table - colspan

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).


Naposledy upravil chrono dňa 29.06.2015 19:35, celkovo upravené 1

Offline

Prevádzkovateľ fóra
Prevádzkovateľ fóra
Responzivny dizajn pri table - colspan

Registrovaný: 01.05.05
Príspevky: 13412
Témy: 1494 | 1494
Bydlisko: Bratislava
Napísal autor témyOffline : 29.06.2015 19:34 | Responzivny dizajn pri table - colspan

Jo uz to funguje ako ma :) dik, tak snad to tu onedlho spojazdnim


_________________
Streacom DA2 | SilverStone Titanium SX800-LTI 800W | ASRock X299E-ITX/ac | Intel Core i9-9980XE & be quiet! Dark Rock TF | Kingston HyperX Impact 64 GB DDR4 2666 MHz | NVIDIA Titan RTX 24 GB | Intel SSD Optane 905P 480 GB NVMe U.2 & Intel SSD 750 1,2 TB NVMe U.2 & Intel SSD 660p 2 TB NVMe M.2 & Seagate BackUp Plus Portable 56 TB USB | 55" 4K OLED Dell Alienware AW5520QF | Ergotron LX Wall Mount Keyboard Arm | Logitech Craft | Logitech G603 | Logitech F710 | Harman Kardon Sabre SB 35 & Sennheiser RS 175 | Microsoft Windows 11 Enterprise | APC Back-UPS BE-850 VA | Lenovo ThinkPad X250 & Microsoft Windows 11 Professional | iPhone 15 Pro 256 GB & Pitaka Aramid | SilverStone ML05B Milo | Corsair SF600 SFX 600W | ASRock X99E-ITX/ac | Intel Xeon E5-2683 v4 & NOCTUA NH-L12S | Kingston HyperX Savage 32 GB DDR4 2400 MHz | NVIDIA GeForce GT 710 1 GB | Intel SSD Optane Memory 32 GB NVMe M.2 & Intel SSD 730 240 GB SATA | Ubuntu 24.04.1 LTS
Offline

Zmazaný užívateľ
Zmazaný užívateľ
Obrázok užívateľa
NapísalOffline : 29.06.2015 19:35 | Responzivny dizajn pri table - colspan

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


Offline

Skúsený užívateľ
Skúsený užívateľ
Obrázok užívateľa

Registrovaný: 13.11.07
Prihlásený: 20.08.16
Príspevky: 1702
Témy: 0 | 0
NapísalOffline : 29.06.2015 19:39 | Responzivny dizajn pri table - colspan

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)


Offline

Prevádzkovateľ fóra
Prevádzkovateľ fóra
Responzivny dizajn pri table - colspan

Registrovaný: 01.05.05
Príspevky: 13412
Témy: 1494 | 1494
Bydlisko: Bratislava
Napísal autor témyOffline : 29.06.2015 19:48 | Responzivny dizajn pri table - colspan

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


_________________
Streacom DA2 | SilverStone Titanium SX800-LTI 800W | ASRock X299E-ITX/ac | Intel Core i9-9980XE & be quiet! Dark Rock TF | Kingston HyperX Impact 64 GB DDR4 2666 MHz | NVIDIA Titan RTX 24 GB | Intel SSD Optane 905P 480 GB NVMe U.2 & Intel SSD 750 1,2 TB NVMe U.2 & Intel SSD 660p 2 TB NVMe M.2 & Seagate BackUp Plus Portable 56 TB USB | 55" 4K OLED Dell Alienware AW5520QF | Ergotron LX Wall Mount Keyboard Arm | Logitech Craft | Logitech G603 | Logitech F710 | Harman Kardon Sabre SB 35 & Sennheiser RS 175 | Microsoft Windows 11 Enterprise | APC Back-UPS BE-850 VA | Lenovo ThinkPad X250 & Microsoft Windows 11 Professional | iPhone 15 Pro 256 GB & Pitaka Aramid | SilverStone ML05B Milo | Corsair SF600 SFX 600W | ASRock X99E-ITX/ac | Intel Xeon E5-2683 v4 & NOCTUA NH-L12S | Kingston HyperX Savage 32 GB DDR4 2400 MHz | NVIDIA GeForce GT 710 1 GB | Intel SSD Optane Memory 32 GB NVMe M.2 & Intel SSD 730 240 GB SATA | Ubuntu 24.04.1 LTS
Offline

Zmazaný užívateľ
Zmazaný užívateľ
Obrázok užívateľa
NapísalOffline : 29.06.2015 20:12 | Responzivny dizajn pri table - colspan

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.


Offline

Skúsený užívateľ
Skúsený užívateľ
Obrázok užívateľa

Registrovaný: 13.11.07
Prihlásený: 20.08.16
Príspevky: 1702
Témy: 0 | 0
NapísalOffline : 29.06.2015 20:34 | Responzivny dizajn pri table - colspan

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

Responzivny dizajn pri table - colspan

Responzivny dizajn pri table - colspan


Offline

Zmazaný užívateľ
Zmazaný užívateľ
Obrázok užívateľa
NapísalOffline : 29.06.2015 21:20 | Responzivny dizajn pri table - colspan

Dakujem, uz to vidim.


Offline

Prevádzkovateľ fóra
Prevádzkovateľ fóra
Responzivny dizajn pri table - colspan

Registrovaný: 01.05.05
Príspevky: 13412
Témy: 1494 | 1494
Bydlisko: Bratislava
Napísal autor témyOffline : 30.06.2015 0:18 | Responzivny dizajn pri table - colspan

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


_________________
Streacom DA2 | SilverStone Titanium SX800-LTI 800W | ASRock X299E-ITX/ac | Intel Core i9-9980XE & be quiet! Dark Rock TF | Kingston HyperX Impact 64 GB DDR4 2666 MHz | NVIDIA Titan RTX 24 GB | Intel SSD Optane 905P 480 GB NVMe U.2 & Intel SSD 750 1,2 TB NVMe U.2 & Intel SSD 660p 2 TB NVMe M.2 & Seagate BackUp Plus Portable 56 TB USB | 55" 4K OLED Dell Alienware AW5520QF | Ergotron LX Wall Mount Keyboard Arm | Logitech Craft | Logitech G603 | Logitech F710 | Harman Kardon Sabre SB 35 & Sennheiser RS 175 | Microsoft Windows 11 Enterprise | APC Back-UPS BE-850 VA | Lenovo ThinkPad X250 & Microsoft Windows 11 Professional | iPhone 15 Pro 256 GB & Pitaka Aramid | SilverStone ML05B Milo | Corsair SF600 SFX 600W | ASRock X99E-ITX/ac | Intel Xeon E5-2683 v4 & NOCTUA NH-L12S | Kingston HyperX Savage 32 GB DDR4 2400 MHz | NVIDIA GeForce GT 710 1 GB | Intel SSD Optane Memory 32 GB NVMe M.2 & Intel SSD 730 240 GB SATA | Ubuntu 24.04.1 LTS
 [ Príspevkov: 15 ] 


Responzivny dizajn pri table - colspan



Podobné témy

 Témy  Odpovede  Zobrazenia  Posledný príspevok 
V tomto fóre nie sú ďalšie neprečítané témy.

Responzivny dizajn - chyby

[ Choď na stránku:Choď na stránku: 1 ... 4, 5, 6 ]

v Správy pre vedenie fóra

152

10003

21.01.2016 8:00

SomariK

V tomto fóre nie sú ďalšie neprečítané témy.

Zobrazenie reklamy a responzivny dizajn

v Webdesign

0

448

13.09.2013 20:32

quark

V tomto fóre nie sú ďalšie neprečítané témy.

z table do table

v HTML, XHTML, XML, CSS

5

950

25.05.2006 14:48

JanoF

V tomto fóre nie sú ďalšie neprečítané témy.

responzivny web

v HTML, XHTML, XML, CSS

27

980

03.07.2015 16:57

chrono

V tomto fóre nie sú ďalšie neprečítané témy.

Responzivny webdizajn vs. mobilna verzia webu

[ Choď na stránku:Choď na stránku: 1, 2 ]

v Webdesign

32

1837

05.03.2014 9:59

hatto13

V tomto fóre nie sú ďalšie neprečítané témy.

Chrome dizajn

v Sieťové a internetové programy

0

168

22.03.2024 8:24

markov600

V tomto fóre nie sú ďalšie neprečítané témy.

moj dizajn

[ Choď na stránku:Choď na stránku: 1, 2 ]

v Webdesign

57

2789

16.05.2008 9:18

pa3ck

V tomto fóre nie sú ďalšie neprečítané témy.

dizajn stránky

v Webdesign

1

886

12.08.2011 17:26

1daemon1

V tomto fóre nie sú ďalšie neprečítané témy.

Vytvorim dizajn

v Ponuka práce

2

1076

05.05.2009 10:20

GoodWill

V tomto fóre nie sú ďalšie neprečítané témy.

c# dizajn

v Ostatné

3

621

09.04.2015 11:46

walther

V tomto fóre nie sú ďalšie neprečítané témy.

Fŕst dizajn

v Webdesign

3

1120

07.05.2011 14:15

zaefrim

V tomto fóre nie sú ďalšie neprečítané témy.

Dizajn pre rozcestník

v Webdesign

15

1270

28.07.2008 17:14

emer

V tomto fóre nie sú ďalšie neprečítané témy.

trochu prerobiť dizajn?

v HTML, XHTML, XML, CSS

5

868

17.07.2009 20:16

Ďuri

V tomto fóre nie sú ďalšie neprečítané témy.

Dizajn za peniaze!!!

v Ponuka práce

3

1284

02.10.2008 16:15

Flety

V tomto fóre nie sú ďalšie neprečítané témy.

Dizajn z nudy

v Webdesign

18

1706

20.12.2008 19:56

shaggy

V tomto fóre nie sú ďalšie neprečítané témy.

table?

v HTML, XHTML, XML, CSS

5

714

12.01.2008 20:40

Hees



© 2005 - 2024 PCforum, edited by JanoF