| Autor | Zpráva | ||
|---|---|---|---|
| KamilZm Profil |
Ahoj, nemohu přijít na strašnou ptákovinu. Mám tabulku a chci, aby byla přes celou šířku kontejneru, ve kterém je. Chtěl bych, aby poslední sloupec automaticky vyplnil zbývající místo, konkrétně takto, jako tabulka 1: http://jsfiddle.net/JZSjj/3/ . Problém ale je, že to dosáhnu pouze tak, že nastavím "white-space: nowrap;", jinak se první sloupec zalomí (viz tabulka 2). což nemohu. Když poslední sloupec neroztáhnu, tak se mi roztahají všechny proporcionálně, což je škaredé (tabulka 3). Je na to nějaký jednoduchý trik?
|
||
| peta Profil |
#2 · Zasláno: 6. 9. 2013, 12:28:12
white-space: nowrap
111 222 333 444 jinak se první sloupec zalomí To je logicke, ze se zalomi, kdyz druha bunka ma mit sirku 100% a mas mezi tim bezne mezery a ne nbsp. Bys musel prvnimu sloupci nastavit sirku. White-space: nowrap nebo nastavit width. Nic lepsiho mne nenapada. |
||
| KamilZm Profil |
#3 · Zasláno: 6. 9. 2013, 12:35:40
Blbé je, že když nastavím width, tak to nebude univerzální, ale natvrdo. Když dám nowrap, tak to zase dělá bordel, když je v tabulce jen jeden sloupec s delším textem jak šířka místa pro tabulku.
|
||
| tiso Profil |
#4 · Zasláno: 6. 9. 2013, 12:38:16
Takže chceš druhý stĺpec na viac riadkov a prvý len na jeden?
td:first-child {
white-space: nowrap;
} |
||
| KamilZm Profil |
#5 · Zasláno: 6. 9. 2013, 12:43:42
Chci, aby měly všechny sloupce minimální šířku nutnou pro zobrazení bez zalomení a poslední vyplnil případný zbytek. Pokud by nebylo místo, tak by se teprve začaly (klidně všechny) sloupce zalamovat. Sloupců je více, je to proměnné.
Zatím to mám udělané takto (LESS) takto, ale moc se mi ten způsob řešení nelíbí: table
{
width: 100%;
th:last-child // roztahnu posledni sloupec (staci hlavicka)
{ width: 100%; }
td // zakazu zalamovani (roztazeni posledniho by ho automaticky vyvolalo)
{ white-space: nowrap; }
td:last-child // ale kdyby to byl jediny, tak mu zalamovani povolim, aby nepretekl
{ white-space: normal; }
} |
||
| peta Profil |
Pak tu mas moznost resit to pres js a vypocitavat si sam sirku bunek podle vlastnich pravidel.
(ten predchozi text jsem smazal, pac to bylo vlastne normalni chovani tabulky, pokud to nekdo cetl pred smazanim...) |
||
| Sir Tom Profil |
#7 · Zasláno: 6. 9. 2013, 18:13:37
KamilZm:
Čeho se vůbec snažíš dosáhnout? Proč musí být první sloupec natěsnaný až k textu a poslední velký až k okraji DIVu? Jedná se o např. ceníkovou tabulku, kde vlevo je cena s měnou a vpravo jsou informace k oné ceně? |
||
| KamilZm Profil |
#8 · Zasláno: 6. 9. 2013, 20:12:32
Snažím se dosáhnout největší přehlednosti. Nejedná se jen o první sloupec, ale i o druhý, třetí, .... aby uživatel nemusel rejdit očima přes široký řádek, ve kterém jsou velké a zbytečné mezery (to by splňovala tabulka bez roztažení). Zároveň ale chci, aby to bylo trochu hezké, proto ta max. šířka (na stránce je více tabulek a je podstatně hezčí, když jsou všechny stejně široké, přestože uvnitř mají jinak široké sloupce).
|
||
| Sir Tom Profil |
#9 · Zasláno: 6. 9. 2013, 21:08:52
KamilZm:
Hezkou tabulku můžeš vytvořit i barvami - např. extra barvu pro záhlaví. Různé barvy pro sudé a liché řádky / sloupce. Různé barvy a styl písma pro různé hodnoty (např. kladná čísla černě, záporná červeně). Aby uživatel nemusel rejdit očima přes široký řádek stačí mít neširoký řádek. V opačném případě vždy někde budeš mít volné místo - buď uprostřed nebo na konci. Tvůj problém se dá také řešit takto: Celé tabulce dej šířku 100 % (nebo tolik kolik budeš chtít). Všem buňkám, který mají být natěsno k obsahu dej velikost např. jenom 1px (buňka se stejně roztáhne tak, aby byla těsně na obsah). |
||
| KamilZm Profil |
>V opačném případě vždy někde budeš mít volné místo - buď uprostřed nebo na konci.
Na konci to nevadí, protože nemá "roztahané" informace a podstatně lépe se to čte, než když má sloupec, pak 1/2 obrazovky místo (přeháním) a pak až další údaj. Která tabulka z prvního odkazu se Ti nejlépe čte? Mě jednoznačně č. 1. >Celé tabulce dej šířku 100 % (nebo tolik kolik budeš chtít). Všem buňkám, který mají být natěsno k obsahu dej velikost např. jenom 1px (buňka se stejně roztáhne tak, aby byla těsně na obsah). Tohle jsem zkoušel, ale vyžaduje to nowrap, jinak se to zaláme na mezerách, což nechci. Každopádně díky moc za rady, ale evidentně to nepůjde :-( |
||
|
Časová prodleva: 11 let
|
|||
0