| 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 |
#2 · Zasláno: 16. 2. 2016, 10:27:18
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 |
#3 · Zasláno: 16. 2. 2016, 10:32:17
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 |
#4 · Zasláno: 16. 2. 2016, 10:45:51
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 |
#6 · Zasláno: 16. 2. 2016, 11:28:15
Živá ukázka
Mělo by to fungovat, ale je to trochu "prasárna" |
||
| Stalker Profil |
#7 · Zasláno: 16. 2. 2016, 13:23:43
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 |
#8 · Zasláno: 16. 2. 2016, 13:31:53
Stalker:
Můžete udělat tabulku a pro responzi změnit buňkám vlastnost display. |
||
| Str4wberry Profil |
#9 · Zasláno: 16. 2. 2016, 13:48:32
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 |
#10 · Zasláno: 16. 2. 2016, 14:15:00
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 |
#11 · Zasláno: 16. 2. 2016, 16:25:31
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 * |
#12 · Zasláno: 16. 2. 2016, 16:39:26
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číš... :-) |
||
|
Časová prodleva: 8 let
|
|||
0