Autor Zpráva
Stalker
Profil
Ahoj,

píšu tabulku v css a potřeboval bych vždy řádek s 3mi sloupci a další řádek se 100% šířkou a tak dále a tak dále...

Výsledek by měl vypadat cca takto:
+---+---+---+
|   |   |   |
+---+---+---+
|           |
+-----------+
|   |   |   |
+---+---+---+
|           |
+-----------+

Víceméně se snažím udělat pomocí css colspan, ale nikde jsem žádné řešení nenašel. Je to vůbec možné?
Str4wberry
Profil
Ne, v CSS colspan není*. Ale tak v podstatě by neměl být problém docílit požadovaného vzhledu třeba obtékanými <div>y s příslušným počtem elementů v řádku a nastavenou šířkou, ne?

*) Existuje vlastnost column-span, ale ta dělá něco jiného: Vícesloupcový text a column
Stalker
Profil
Str4wberry:
Díky za brzkou odpověď.

Ono je to celé trošku složitější. Těch sloupců je v každém řádku 7 a vždy řádek pod ním musí mít 100% šířku. Pevnou šířku nastavit nemůžu, jelikož to musí být responzivní a ve chvíli, kdy se nějaký sloupec umaže, musí se tabulka přizpůsobit. Každý sloupec může mít také různě široký a vysoký obsah, takže bych potřeboval, aby se to natahovalo jako tabulka.

Z hlavy si teď nedokážu představit, jestli toho jde pomocí obtékaných divů dosáhnout. Asi to budu muset zkusit.
Str4wberry
Profil
Pokud dobře rozumím, tak by mohlo jít zanořovat do sebe ty tabulky.

Živá ukázka
Stalker
Profil
Str4wberry:
Rozumíš velmi dobře, i toto řešení mě napadlo, ale bohužel nejde použít, jelikož potřebuji, aby šířky buněk byly zarovnané pod sebou jak v klasické tabulce.

ukázka rozbité tabulky: Živá ukázka
Ukázka pěkné tabulky: Živá ukázka


Ten 100% řádek totiž vždy schovaný a obejví se až po kliku na řádek nad ním.
Speedy21
Profil
Živá ukázka
Mělo by to fungovat, ale je to trochu "prasárna"
Stalker
Profil
Speedy21 [#6]:
Zajímavá prasárnička :) Nicméně, když bude každá buňka jinak široká, tak budou buňky různě široké.

Zřejmě takové řešení nasimulovat nelze. Šla by udělat tabulka a pro responzi to udělat jinak, a nebo použít floatované prvky. Jiné řešení nevidím.
Kajman
Profil
Stalker:
Můžete udělat tabulku a pro responzi změnit buňkám vlastnost display.
Str4wberry
Profil
Zkusil jsem si s tím ještě pohrát.

Ve Firefoxu to asi funguje: Živá ukázka

Problém je v ostatních prohlížečích, protože position: relative se u buněk tabulek chová různě napříč prohlížeči.

Těžko říct, jestli se to dá řešit bez <table>.
Stalker
Profil
Str4wberry:
Hodně zajímavý řešení :) ALe také jsem měl vždy problém s pozicování v tabulkách. škoda že to je rozpadlé jinde.

Kajman [#8]:
udělat tabulku a pro responzi ji pomocí css "zničit"? Hmm, to mě nenapadlo. Dá se to vůbec? je to vůbec "korektní, či jak to nazvat? :D

Jinak možná jako nejlepší řešení se mi jeví zanořené css tabulky s tím, že určím šířky tabulek, holt tam bude toto omezení...
Kajman
Profil
Stalker:
je to vůbec "korektní, či jak to nazvat?

Když se změní display pro všechny elementy tabulky (td, th, tr, thead, tbody, tfoot, table), tak by to mělo fungovat. Hlavní otázkou zůstává, jestli se uživatel vyzná, co je která hodnota, když to nebude ve sloupci s nadpisem.
anonymníí
Profil *
Stalker:
Už minule jsem zaznamenal, že tvoříš něco, co se mi zdá být neideální. Píšeš, že potřeuješ tabulku, ale neřešíš to tabulkou. Pokud to jsou tabulková data, proč vymýšlíš blbosti?

Stejně jako minule jsi dal nějaké zadání, které vlastně neodpovídalo realitě. Nyní jsme se té realitě asi možná přiblížili, ale nedá mi to se nezeptat. Jedná se skutečně o tabulková data, či nikoliv? Nemyslím tím, že to je zarovnané do nějaké mřížky, ale sémanticky, povahou dat. Máš nějakou konkrétní ukázku, co se snažíš udělat (ne jen, že potřebuješ tabulku bez tabulky v CSS). Máš nějakou předlohu, jak se to má na mobilních telefonech a tabletech chovat? Můžeš některá z těch dat (řádek a/nebo sloupec) na telefonu zanedbat? Musí to na telefonu držet tabulkový vzhled (tedy data jsou skutečně tabulková), nebo nemusí? Otázek je mraky, ne všechno se dá řšit obecně se zjednodušeným popisem.

Celkově to na mě působí, že sis ukousl moc velké sousto, na které svými znalostmi nestačíš... :-)

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: