tabla HTML con un ancho de 100% no funciona con texto largo

Question

I tienen la siguiente estructura

<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> 

La primera td toma 60 píxeles, la segunda toma el resto del 100%, pero cuando tengo algo de largo texto sin espacios y sin guiones la tabla se vuelve más grande que el 100%. ¿Cómo mostrar el texto no rompible en una línea o en varias líneas (ambas formas son aceptables) y mantener la tabla en el 100% de la pantalla? He intentado solucionar esto con overflow-hidden pero no tiene ningún efecto. Aquí hay una captura de pantalla del problema: link

Answer 1

Establecer table-layout : fixed en el CSS o <table style='table-layout : fixed'> que oughta solucionarlo.

Aquí está el code sample. Echale un vistazo.

Answer 2

Hay una propiedad CSS 3, word-wrap:break-word; que hace exactamente lo que necesita. Pero lamentablemente no funciona con las celdas de la tabla. Creo que debes reconsiderar tu estructura, optando por un diseño sin mesa.

de escribir este ejemplo para que

<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 se apoya en IE 5.5 o superior, Firefox 3.5 +, y los navegadores WebKit como Chrome y Safari.

Answer 3

pruebe lo siguiente:

<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>