Autor Zpráva
Chadas
Profil
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
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
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
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
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
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
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
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
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
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
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;
}
Pseudotriedy :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
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.

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

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