tabella HTML con larghezza 100% non funziona con lunghi testo

Question

ho la seguente struttura

<table cellspacing="0" cellpadding="0" width="100%"> 
<tr> 
    <td style="width:60px;"> 
     ... 
    </td> 
    <td> 
     <div style="width:100%;overflow-x:hidden;"> 
      PROBLEMS ARE HERE 
     </div> 
    </td> 
</tr> 
... 
</table> 

Il primo td prende 60px, il secondo prende il resto del 100%, ma quando ho qualche lungo testo senza spazi e senza trattini il tavolo diventa più grande del 100%. Come visualizzare il testo non divisibile in una riga o su più righe (entrambi i modi sono accettabili) e mantenere la tabella sul 100% dello schermo? Ho provato a risolvere il problema con overflow nascosto ma non ha alcun effetto. Ecco uno screenshot del problema: link

Answer 1

Impostare table-layout : fixed nel CSS o <table style='table-layout : fixed'> che oughta risolvere il problema.

Questo è il code sample. Controlla.

Answer 2

C'è una proprietà CSS3, word-wrap:break-word; che fa esattamente quello che ti serve. Ma sfortunatamente non funziona con le celle della tabella. Penso che tu debba ripensare la tua struttura, optando per un design senza tabella.

Ho scritto questo esempio per voi

<style> 
section { /* your table */ 
    display:block; 
    width:300px; 
    background-color:#aaf; 
} 
section:after {display:block; content:''; clear:left} 

div { /* your cells */ 
    float:left; 
    width:100px; 
    background-color:#faa; 
    word-wrap:break-word; 
} 
</style> 

<section> 
    <div>Content.</div> 
    <div>Loooooooooooooooooooooooooooooooooooooooong cat.</div> 
</section> 

P.S: word-wrap è supportato in IE 5.5+, Firefox 3.5+, e browser WebKit come Chrome e Safari.

Answer 3

provare quanto segue:

<table style="word-break:break-all;" cellspacing="0" cellpadding="0" width="100%"> 
<tr> 
    <td style="width:60px;"> 
     ... 
    </td> 
    <td> 
     <div style="width:100%;overflow-x:hidden;"> 
      PROBLEMS ARE no longer HERE ! 
     </div> 
    </td> 
</tr> 
... 
</table>