Autor Zpráva
Lojzza
Profil *
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
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 *
Hmm, ale řádek se nezalomil, tabulka je stále širší než definovaný div.
jefitto44
Profil
Daj odkaz na živú ukážku
rafej
Profil
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 *
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
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
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
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
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
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;}
Nevýhodou je méně přehledný CSS, výhodou je nepoužití třídy. Já osobně bych pro tabulku s pár řádky použil třídy, pro mnohařádkovou tabulku bych upřednostnil :first-child a selektor +, ale myslím si, že to závisí na vkusu každého soudruha.

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

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