Página 1 de 1

Limitar tamaño de una tabla con css

NotaPublicado: 2011-01-22 13:51 @618
por BigBear
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:
Sintáxis: [ Descargar ] [ Ocultar ]
Using html4strict Syntax Highlighting
  1. <table>
  2. <td>sdsdsdsd</td><tr>
  3. <td>sdfsdddsddddddddddddddddddddddddddddddffff</td><tr>
  4. </table>
Coloreado en 0.002 segundos, usando GeSHi 1.0.8.4


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)
Sintáxis: [ Descargar ] [ Ocultar ]
Using text Syntax Highlighting
sdsdsdsd
sdsdsd
sdsdsd
sdsdds
Coloreado en 0.000 segundos, usando GeSHi 1.0.8.4

Re: Limitar tamaño de una tabla con css

NotaPublicado: 2011-01-22 14:05 @628
por explorer
Aplica el estilo word-wrap: break-word; al interior de la celda.

Re: Limitar tamaño de una tabla con css

NotaPublicado: 2011-01-22 14:23 @641
por BigBear
Te referís a algo así, porque no lo veo como quería
Sintáxis: [ Descargar ] [ Ocultar ]
Using html4strict Syntax Highlighting
  1. <style>
  2. .main {
  3. word-wrap: break-word;  
  4. }
  5.  
  6. </style>
  7.        
  8. <table border=1>
  9. <td class=main>dsfdsdssssssssssssssdssdsdsdssssssss</td><tr>
  10. <td class=main>sddssd</td><tr>
  11. </table>
Coloreado en 0.001 segundos, usando GeSHi 1.0.8.4


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

Re: Limitar tamaño de una tabla con css

NotaPublicado: 2011-01-22 15:12 @675
por explorer
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:

Sintáxis: [ Descargar ] [ Ocultar ]
Using html4strict Syntax Highlighting
  1. <style type="text/css">
  2. .main {
  3.         word-wrap: break-word;
  4.         word-break:break-all;
  5. }
  6. </style>
  7.  
  8. <table border="1" width="50"  style="table-layout: fixed">
  9. <td class="main">dsfdsdssssssssssssssdssdsdsdssssssss</td><tr>
  10. <td class="main">sddssd</td><tr>
  11. </table>
Coloreado en 0.001 segundos, usando GeSHi 1.0.8.4

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.