Responzivní tabulka

verified

2. 1. 2013 14:50:47

Dobrý den.

Předělával jsem si moje portfolio na responzivní verzi a narazil jsem na problém s tabulkou. Při využití běžných tabulek se velmi špatně nastavovala šířka sloupce. Nakonec jsem problém vyřešil takto:

tuto konstrukci jsem pomocí CSS rozložil do řádku a nastyloval. Výsledek můžete vidět na http://grysom.cz/novy/reference.html.

Pokud ano, jak jste to řešili vy? Mě jiné řešení nenapadlo.

+ sice mi to výrazně nevadí, ale zajímalo by mne, jak odstranit ty mezery mezi jednotlivými sloupci. Myslel jsem, že je to paddingem, ale i bez něho tam mezery zůstaly.

Děkuji za příspěvky/nápady.

2. 1. 2013 14:50:47

https://webtrh.cz/diskuse/responzivni-tabulka#reply847982

verified

2. 1. 2013 15:14:10

Ale to není tabulka. To je seznam.

P.S.: A že se něčemu nastaví procentuální šířka ani zdaleka neznamená, že je to reponsivní. Proč mi na tabletu třetinu stránky zabírá "nic" a přitom text se musí zalamovat, protože se nevejde?

2. 1. 2013 15:14:10

https://webtrh.cz/diskuse/responzivni-tabulka#reply847981

Miloslav Lešetický

verified

(10 hodnocení)

2. 1. 2013 15:17:56

grysom

Toto http://grysom.cz/novy/reference.html je klasický příklad tabulkových dat a je vhodné tedy použít tabulku.

2. 1. 2013 15:17:56

https://webtrh.cz/diskuse/responzivni-tabulka#reply847980

verified

2. 1. 2013 15:19:28

Napsal Souki;888878
Ale to není tabulka. To je seznam.
P.S.: A že se něčemu nastaví procentuální šířka ani zdaleka neznamená, že je to reponsivní. Proč mi na tabletu třetinu stránky zabírá "nic" a přitom text se musí zalamovat, protože se nevejde?

Však já neříkám, že v kódu je to tabulka, pouze že to tak navenek vypadá. A protože neříkám, že je to optimální řešení, tak se ptám na jiné.

Ta rezponzivita ještě není doladěná ...

---------- Příspěvek doplněn 02.01.2013 v 15:20 ----------

Napsal Plaváček;888880
grysom
Toto http://grysom.cz/novy/reference.html je klasický příklad tabulkových dat a je vhodné tedy použít tabulku.

To jsem chtěl, ale nešlo mi nastavit šířka sloupce. Asi nevím jak - uvítám tedy, když mi to někdo předvede napsané v kódu.

2. 1. 2013 15:19:28

https://webtrh.cz/diskuse/responzivni-tabulka#reply847979

Miloslav Lešetický

verified

(10 hodnocení)

2. 1. 2013 15:26:01

grysom

Šířku sloupce lze efektivně nastavit třeba pomocí atributu COL, viz zde: http://www.quirksmode.org/css/columns.html

2. 1. 2013 15:26:01

https://webtrh.cz/diskuse/responzivni-tabulka#reply847978

verified

2. 1. 2013 15:28:12

Napsal Plaváček;888886
grysom
Šířku sloupce lze efektivně nastavit třeba pomocí atributu COL, viz zde: http://www.quirksmode.org/css/columns.html

O tom jsem věděl, ale asi jsem našel špatně popsanou funkčnost, tak jsem to dělal špatně. Tak si zkusím pohrát ještě s tímhle. Děkuji.

2. 1. 2013 15:28:12

https://webtrh.cz/diskuse/responzivni-tabulka#reply847977

verified

2. 1. 2013 16:00:13

Několik přístupů k resposivním tabulkám včetně příkladů: http://css-tricks.com/responsive-data-table-roundup/

2. 1. 2013 16:00:13

https://webtrh.cz/diskuse/responzivni-tabulka#reply847976

verified

2. 1. 2013 16:03:31

Napsal Lukáš Urban;888900
Několik přístupů k resposivním tabulkám včetně příkladů: http://css-tricks.com/responsive-data-table-roundup/

Tam se řeší velké tabulky, ale tady máme 3 sloupce, takže to takový problém nebude.

Tady by ale možná dávalo smysl u nízkého rozlišení tabulku úplně rozbít (to pak nepůjde přes TABLE) a mít třeba buňky pod sebou.

2. 1. 2013 16:03:31

https://webtrh.cz/diskuse/responzivni-tabulka#reply847975

verified

2. 1. 2013 20:54:35

http://www.zurb.com/playground/responsive-tables

2. 1. 2013 20:54:35

https://webtrh.cz/diskuse/responzivni-tabulka#reply847974

Pro odpověď se přihlašte.

Prodej Více

INTELLIGENT FOOD | JIDLO ZE SUPERPOTRAVIN | E-SHOP Inteligentního jídla

15 000 Kč

0 příhozů

chystamesvatbu.cz

1 990 Kč

0 příhozů

Prodám zaběhnutý inzerční web

12 000 Kč

0 příhozů

Pacamls.cz – ultraprémiová přírodní krmiva pro psy a kočky

50 000 Kč

0 příhozů

Předám nevyužitou firmu bez aktivity

1 Kč

0 příhozů

Poptávky Více

Rekonstrukce katalogu Rychlavyuka.cz

Databáze náhradní díly

Rozjetí socek (insta a twitter)

Vytvoření nové webové aplikace na základě starší verze

Hledáme PPCčkaře – Brno, vlastní projekty, žádná agentura

Pracovní nabídky Více

React JS Developer

Ostrava, Práce z domu

60 000 - 80 000 Kč

IT vedoucí / Team leader SW

80 000 - 150 000 Kč

Vývojář / Procesní inženýr s LabVIEW

60 000 - 90 000 Kč

𝗧𝗲𝘀𝘁 𝗘𝗻𝗴𝗶𝗻𝗲𝗲𝗿

Práce z domu, Praha

Nabídky Více

Vývoj online systémů na míru, přesně podle Vašich potřeb

Rank1.cz | Unikátní zkracovač + PopUp reklama zdarma ❤️

Rank1.cz | Unikátní zkracovač + PopUp reklama zdarma ❤️

⭐ KOKESDESIGN.CZ | Logo & Vizuální identita ⭐

Premium 5⭐ RECENZE – 14ks měsíčně za 2 500 Kč