Ver Tema

Doddy · 2011-01-22 13:51 @618

Hola

Ando teniendo un duda con una tabla. Lo que quiero hacer es crear una tabla que mantenga cierto tamaño a pesar de que los contenidos de las filas sean largas.

Ejemplo:

Syntax: [ Download ] [ Hide ]

Using html4strict Syntax Highlighting

<table>
<td>sdsdsdsd</td><tr>
<td>sdfsdddsddddddddddddddddddddddddddddddffff</td><tr>
</table>

El problema es que la segunda fila deforma la tabla. Mi duda es si no habrá alguna forma para que las filas mantenga cierto tamaño quedando la segunda fila larga así (para no deformar el tamaño)

Syntax: [ Download ] [ Hide ]

Using text Syntax Highlighting

sdsdsdsd

sdsdsd

sdsdsd

sdsdds

explorer · 2011-01-22 14:05 @628

Aplica el estilo word-wrap: break-word; al interior de la celda.

Doddy · 2011-01-22 14:23 @641

Te referís a algo así, porque no lo veo como quería

Syntax: [ Download ] [ Hide ]

Using html4strict Syntax Highlighting

<style>
.main {
word-wrap: break-word;  
}
 
</style>
        
<table border=1>
<td class=main>dsfdsdssssssssssssssdssdsdsdssssssss</td><tr>
<td class=main>sddssd</td><tr>
</table>

¿ Si hice algo mal me podrías dar un ejemplo ?

explorer · 2011-01-22 15:12 @675

Las respuestas suelen estar a un clic de distancia con Duck Duck Go. En el primer resultado de la búsqueda aparecen varias soluciones. Esta es la que me funciona en mi Firefox:

Syntax: [ Download ] [ Hide ]

Using html4strict Syntax Highlighting

<style type="text/css">
.main {
        word-wrap: break-word;
        word-break:break-all;
}
</style>
 
<table border="1" width="50"  style="table-layout: fixed">
<td class="main">dsfdsdssssssssssssssdssdsdsdssssssss</td><tr>
<td class="main">sddssd</td><tr>
</table>

Lo principal es decir que la disposición de la tabla es fija (table-layout: fixed), y así se reduce al ancho indicado por width. Solo queda decir cómo se ha de romper la palabra. A mí me funciona con solamente word-wrap: break-word, pero en la página recomiendan los dos.

El estándar dice a este respecto que solo tiene efecto cuando text-wrap está en modo normal o suppress.

Publicidad

Socializa