| Autor | Zpráva | ||
|---|---|---|---|
| Lojzza Profil * |
#1 · Zasláno: 25. 2. 2014, 08:03:23
Asi jednoduchý dotaz, ale já nevím jak.
Jednoduchá tabulka v divu: <style type="text/css">
.div { width:100px; padding:5px; border: 1px solid red; }
.divtab { border: 1px solid blue; }
</style>
<div class="div">
<table class="divtab">
<tr><td>radek1</td></tr>
<tr><td>radek2</td></tr>
<tr><td>dlouhyyyyyyyyyradekkkkkkkkkkkkkkkkk</td></tr>
</table>
</div>jak docílit, aby tabulka díky dlouhému textu nepřesahovala hranice divu, tudíž text se automaticky zalomil (když tam jsou slova, text se zalamuje na základě mezer)? Dík za radu |
||
| jefitto44 Profil |
#2 · Zasláno: 25. 2. 2014, 08:17:48
http://www.w3schools.com/cssref/css3_pr_word-wrap.asp
Slúži na to vlastnosť word-wrap .divtab {
border: 1px solid blue;
word-wrap: break-word;
} |
||
| Lojzza Profil * |
#3 · Zasláno: 25. 2. 2014, 08:24:17
Hmm, ale řádek se nezalomil, tabulka je stále širší než definovaný div.
|
||
| jefitto44 Profil |
#4 · Zasláno: 25. 2. 2014, 10:20:00
Daj odkaz na živú ukážku
|
||
| rafej Profil |
#5 · Zasláno: 25. 2. 2014, 12:07:52
Implementace v prohlížečích bohužel někdy neodpovídá teorii.
Aby to opravdu fungovalo, je někdy ještě potřeba také - nastavit velikost buněk tabulky - a tabulce přidat table-layout: fixed;
|
||
| Lojzza Profil * |
#6 · Zasláno: 25. 2. 2014, 12:57:06
Ano, je to tak, když nastavím
.divtab {border: 1px solid blue; table-layout: fixed; width: 100%;} .divtab td {word-wrap: break-word; } tak se to zalamuje, ale je tu jiný problém. Změním-li počet buněk, např. na 2, jejich velikost se nepřizpůsobí dle délky textu, ale nastaví se na půlku <div class="div">
<table class="divtab">
<tr><td>1</td><td>radek1</td></tr>
<tr><td>2</td><td>radek2</td></tr>
<tr><td>3</td><td>dlouhyyyyyyyyyradekkkkkkkkkkkkkkkkk</td></tr>
</table>
</div>tzn. v první buńce je pouze 1 znak, ale šířka buňky je 50% šířky tabulky. Jde toto nějak obejít, aniž by se musela nastavit pevně šířka buňky? |
||
| rafej Profil |
Myslím, že nejde, ale třeba budou vědět ostatní.
Jediné, co používám je, buď nastavit velikost buněk procentem, anebo nastavit jen některé buňky. Například u sloupců, kde vím, že nebudu potřebovat další roztažení - třeba u data, nebo naopak nastavím pevný rozměr sloupci, který chci zalamovat, například takto: .divtab td:last-Child {word-wrap: break-word; width: 300px; } |
||
| Chamurappi Profil |
Reaguji na rafej:
Pseudotřída :last-child má slabou podporu.
„Implementace v prohlížečích bohužel někdy neodpovídá teorii.“ V tomto případě bych řekl, že do puntíku odpovídá, jen ta teorie není tak přímočará. |
||
| jefitto44 Profil |
#9 · Zasláno: 25. 2. 2014, 22:31:31
Chamurappi:
„Pseudotřída :last-child má slabou podporu.“ Niekde som čítal, že first-child má podporu lepšiu. V takom prípade treba robiť všetko z opačnej strany (if you know what I mean). Či je to dôveryhodná informácia, neviem |
||
| rafej Profil |
#10 · Zasláno: 26. 2. 2014, 20:41:18
Když už tu úspěšně rozvíjíte OT, tak se zeptám. Moderátor může případně oddělit do samostatného vlákna.
V kterých prohlížečích (a verzích) má first-child nebo last-child slabou podporu? V poslední době jsem si při testování problémů nevšimla. |
||
| Chamurappi Profil |
#11 · Zasláno: 28. 2. 2014, 14:08:11
Reaguji na rafej:
Pseudotřídu :first-child podporuje Explorer už od verze 7.
Pseudotřídu :last-child podporuje Explorer až od verze 9.
I ostatní prohlížeče začaly podporovat :last-child o mnoho let později než :first-child. CSS selektory obvykle pracují směrem dopředu a dovnitř, k určení, zda je element posledním potomkem, je zapotřebí kontrola opačným směrem.
|
||
| rafej Profil |
#12 · Zasláno: 28. 2. 2014, 14:46:46
Díky, za vysvětlení. Teď jsem si uvědomila, že
:last-child jsem opravdu úspěšně použila až od IE9. Do té doby jsem využívala atribut class.
Když se vrtám v XPath a XSLT, tak pozapomínám, že v CSS a javascriptu (obzvlášť u IE) to funguje trochu jinak. |
||
| Bubák Profil |
#13 · Zasláno: 28. 2. 2014, 19:28:24
rafej:
„Do té doby jsem využívala atribut class.“ O doby vymizení IE6 jde použít, pokud je počet elementů známý a elementů není větší než malé množství, použít pseudotřídu :first-child a selektor + (přímý sourozenec, nebo méně často soused), třebas pro třetí sloupec tabulky nějak takto:
td:first-child+td+td {background: #def; color: #c00;}:first-child a selektor +, ale myslím si, že to závisí na vkusu každého soudruha.
|
||
|
Časová prodleva: 10 let
|
|||
0