| Autor | Zpráva | ||
|---|---|---|---|
| Chadas Profil |
#1 · Zasláno: 22. 3. 2016, 19:12:54
Potřeboval bych vertikálně zarovnat text v tabulce kde mám sloučené řádky (zelená buňka - zatím jedna). Ideální by bylo pomocí css. Zkoušel jsem už kde co ale nic z toho co už bylo napsáno nefunguje na spojené řádky :(
a ještě kousek kódu: <table> <tr><td rowspan="2"> C - / 5 </td><td> S1 </td><td rowspan="2"> X0 </td><td class="stred"> 1270,- </td><td class="stred"> 1537,- </td></tr> <tr><td> S3 </td><td class="stred"> 1330,- </td><td class="stred"> 1609,- </td></tr> <tr><td rowspan="2"> C - / 7,5 </td><td> S1 </td><td rowspan="2"> X0 </td><td class="stred"> 1320,- </td><td class="stred"> 1597,- </td></tr> <tr> <td> S3 </td><td class="stred"> 1380,- </td><td class="stred"> 1670,- </td></tr> <tr><td class="oznaceni" rowspan="2"> C 8/10 </td><td> S1 </td><td> X0 </td><td class="stred"> 1450,- </td><td class="stred"> 1755,- </td></tr> <tr> <td> S3 </td><td> X0 </td><td class="stred"> 1530,- </td><td class="stred"> 1851,- </td></tr> </table> |
||
| juriad Profil |
#2 · Zasláno: 22. 3. 2016, 19:24:18
Jenže ono to je ve výchozím stavu vystředěné. Živá ukázka
Vertikání pozici textu ovlivňuje vlastnost vertical-align. |
||
| Chadas Profil |
#3 · Zasláno: 22. 3. 2016, 19:41:08
juriad:
No jo, teď na to koukám :) Ono je to tím, že jsem na začátku tabulky uvedl pouze jednoduchý tag <table>. Ono je to správně takto <table class="table-striped table beton-smesi"> Zřejmě to ale dělá třída table. Zkusím to dohledat v čem je problém. Díky za tip. snad to najdu. |
||
| juriad Profil |
#4 · Zasláno: 22. 3. 2016, 19:42:54
Pak použij toto řešení: stackoverflow.com/questions/27747072/vertical-align-in-bootstrap-table
|
||
| Chadas Profil |
juriad:
Vyhodil jsem třídu table a upravil vlastnosti v css. Je to OK. Díky moc. I to odkazované řešení se bude třeba hodit :) Dal by se tady v tom případě použít tag <col class="neco">?
|
||
| Tomáš123 Profil |
#6 · Zasláno: 22. 3. 2016, 21:29:06
Chadas:
Vedľa si písal: „Teď mi to nějak nejde.“ Bez živej ukážky ťažko hádať, ale s Bootstrapom je niekedy nutné celkom agresívne bojovať. Skús posilniť svoje štýly !importantom (zatiaľ kvôli testovacím účelom – keďže deklarácia bude príliš silná, môže nepriaznivo ovplyvňovať okolie; väčšinou existuje elegantnejšia náhrada).
|
||
| Chadas Profil |
#7 · Zasláno: 22. 3. 2016, 22:03:21
Ani !important nepomáhá. Více na webu zdarma. Bohuzel se to tam zobrazuje malinko jinak (ohraničení buňek) ale to v tomto případě nevadí. Hlavně tabulka dole. Ta první má sloučené buňka, tam to asi bude ještě větší problém :( Díky. svatebnisaty.wz.cz/tab
|
||
| Tomáš123 Profil |
#8 · Zasláno: 24. 3. 2016, 11:36:32
Chadas:
V ukážke nevidím žiadne <col>. Pomôcť by ti mohli články HTML tabulky » <col> a Zvýraznění sloupců/řádků tabulky po najetí » Zvýraznění sloupců
|
||
| Chadas Profil |
#9 · Zasláno: 24. 3. 2016, 17:00:25
Tomáš123:
V tabulce už žádné tagy <col> nejsou protože to stejně nefungovalo. Je tam jenom celá tabulka a potřeboval bych poradit jak to "hromadně" naformátovat. Pokud jsem měl nadefinované <col> funkovalo jen nastavení barvy pozadí. Na zarovnání textu to ale nereagovalo ani s !important. Zkusím tam něco doplnit (pozadí, zarovnání textu). Třeba to stihnu než na to někdo koukne ;-/ živá ukázka |
||
| Bubák Profil |
#10 · Zasláno: 24. 3. 2016, 20:33:19
Chadas:
„Pokud jsem měl nadefinované <col> funkovalo jen nastavení barvy pozadí.“ Podle CSS specifikace jde sloupcům tabulky deklarovat pouze tyto vlastnosti: border, background, width, visibility. Většina prohlížečů v tomto CSS specifikaci dodržuje. Využitím pseudotřídy :first-child a selektoru přímého souseda + lze toto omezení obejít a trochu se rozšoupnout. Koukni (do zdrojáku) na stylování sloupců tabulky, v ukázce jsem použil styl pro obarvení pozadí a barvu textu pro <col>, aby to fungovalo i v IE6, je to 3 roky stará ukázka. Myslím si, že dnes je to možné vynechat a stylovat sloupce jen využitím pseudotřídy :first-child a selektoru přímého souseda +.
Moje ukázka není komentovaná, doporučuji podívat se na Stylování HTML tabulek. |
||
| Chadas Profil |
Bubák:
To jsme ale bohužel pořád někde jinde. Nešlo mi ani tak o obarvení pozadí sloupců ale hlavně o formátování textu ve sloupcích. Tím jsem mysel zarovnání případně tučné písmo. Podle toho co píšeš, tak se to hold musí udělat pro každou buňku extra :( Pokud si ale dobře vzpomínám, dřív to nebyl problém nadefinovat pomocí <col> pro celé sloupce. Hold je nová doba a pravidla se mění. Doufal jsem jenom, že to půjde nějak efektně a rychleji. Bohužel. |
||
| Bubák Profil |
#12 · Zasláno: 25. 3. 2016, 16:02:23
Dyk tam píšu, že „Využitím pseudotřídy
:first-child a selektoru přímého souseda + lze toto omezení obejít a trochu se rozšoupnout.“ Co na tom není jasné? Tím můžu nadeklarovat buňce (skoro) jakoukoliv vlastnost, je jedno, zda barvy nebo zarovnání texti, tučnost písma, kurzívu...
Koukni na ukázku: Prvnímu sloupci jsem deklaroval tučné písmo a zarovnaní doleva. Druhému sloupci jsem zarovnaní na střed. Třetímu sloupci jsem deklaroval tučné šikmé písmo a zarovnání doprava. Živá ukázka stylování sloupců tabulky „Hold je nová doba a pravidla se mění.“ Pravidla, tedy CSS specifikace, se v tomto bodě nezměnila. Změna nastala nástupem prohlížečů, dodržujícách CSS specifikaci a vymizením starých Explorerů, které specifikaci nedodržovaly. |
||
| Chadas Profil |
#13 · Zasláno: 25. 3. 2016, 17:41:46
Bubák:
Moc se omlouvám. Já to zkoušel zase na ten tag <col> a vůbec jsem si to neuvědomil, že to funguje jen u pseudotřídy :first-child. Teď jsem si to zkoušel znovu a a tentokrát na správném místě. Nemá to chybu. Díky moooc.
|
||
| Chadas Profil |
Tak jsou tu další problémy :( U první tabulky jsou některá buňky sloučeny v řádcích pod sebou. To se potom projeví při nastavení např. zarovnání celého sloupce.
Spodní dvě tabulky vedle sebe jsou bez problémů a jdou nastylovat s použitím :first-child. Zkusil jsem i obarvit písmo a to se nežádoucím způsobem projevilo i na první (horní) tabulce i když ta má nastavenou třídu class="hlavni". Proč se tedy obarví i některé texty v první tabulce a jak obejít problém spojených buněk s nastavením rowspan="2"? UkázkaČerveně obarvený text v první tabulce už v ukázce není. Našel jsem tam chybu a opravil jsem to :) Teď už jenom nevím jak nastylovat sloupce se sloučenýma buňkama :( Ukázka |
||
| Tomáš123 Profil |
Chadas:
Posun o jednu bunku je spôsobený atribútom rowspan. V ďalších riadkoch potom jedna bunka chýba a selektor vyberie nesprávne prvky. Toto by šlo obísť doplnením dvoch deklarácií:
table.hlavni td[rowspan]:first-child + td + td + td,
table.hlavni td[rowspan]:first-child + td + td + td + td {
color: green;
font-weight: bold;
text-align: right;
}
table.hlavni td[rowspan]:first-child + td + td {
color: #333;
font-weight: normal;
text-align: left;
}Nenapadá mi ale, ako by šlo vyriešiť tie zostavajúce riadky, ktoré nie sú vertikálne spojené (neexistuje atribút, ktorý by pomohol prvky zamerať) a majú všetky bunky v riadku. Na základe počtu potomkov, či nejakého zložitejšieho vzoru v CSS vyberať nejde. Ostáva len priradiť takým riadkom nejakú triedu alebo nastaviť prvej bunke vo vnútri takého riadku rowspan="1". JavaScript by to asi zvládol vyriešiť.
ÚPRAVA: Pozerám, že ostáva ešte jeden typ situácie, kde sú spojené stredné dve bunky. Asi najjednoduchšie by bolo napočítať dva prvky od konca: table.hlavni td:nth-last-child(2), table.hlavni td:last-child {
/* Namiesto :last-child by šlo použiť aj :nth-last-child(1). */
color: green;
font-weight: bold;
text-align: right;
}:nth-last-child a :last-child majú rovnako zlú podporu. Existuje ešte pseudotrieda :nth-last-of-type(), ktorá napočíta posledných n prvkov špecifikovanej značky (v tvojom prípade je ale zbytočná; v riadku máš aj tak iba značky <td>).
|
||
| Chadas Profil |
#16 · Zasláno: 27. 3. 2016, 12:25:28
Tomáš123:
Díky moc za tip. S tím už se dá něco dělat :) Buňkám které nevyhovují žádnému pravidlu nastavím třídu a bude vystaráno. Ono jich zase není tolik a budu mít jistotu jakž takž, že se to bude správně zobrazovat v prohlížečích. Je to zkrátka poučení, že se spojenýma buňkama to potom není úplně jednoduché formátování. Ještě jednou díky všem. |
||
|
Časová prodleva: 8 let
|
|||
0