¿Cómo evito que mi tabla html se extienda?

Question

A veces, cuando un dato en una de las celdas de mi tabla es demasiado largo, estira la celda y deforma el diseño de toda la tabla. ¿Cómo puedo prevenir esto?

Answer 1

Establezca el ancho y alto de la etiqueta td usando CSS. Entonces necesita lidiar con el desbordamiento.

td { 
    width: 40px; 
    height: 20px; 
} 

Answer 2

Suponiendo que no tiene ningún espacio de no separación o texto súper larga sin un espacio en la célula, por lo general he tenido la mejor suerte al establecer explícitamente la anchura de dicha célula a través de CSS (parece para trabajar mejor que hacer algo como "width = '100'". Si los datos en la celda son solo una cadena muy larga, no hay mucho que puedas hacer aparte de truncarlo programáticamente o envolver los datos en un div con un explícito anchura y algo así como overflow: hidden/auto (auto si desea una barra de desplazamiento horizontal o algo así)

Answer 3

uso overflow: hidden para ocultar el desbordamiento tales como:.

td, th { 
    overflow: hidden; 
} 

Para que esto funcione, las etiquetas <td> o <th> deben tener ancho asignado.

Answer 4

Si debe absolutamente tienen la tabla de mantener su diseño, incluso en la cara de los espacios de no separación, entonces usted tendrá que utilizar:

overflow: hidden; 

Sin embargo, me gustaría recomendar en contra de ella. OMI, es más importante que los datos sean legibles que el diseño perfecto.

Answer 5

Probablemente desee table-layout:fixed y establezca el ancho en las primeras celdas de una fila.

Ver http://www.w3.org/TR/CSS2/tables.html#fixed-table-layout para una explicación más detallada.

Answer 6

yo sólo tenía el mismo problema y resolverlo terminaron con esto:

table { width: 1px; /* This ugly hack allows the table to be only as wide as necessary, breaking text on spaces to allow cells to be less wide. */ } 

Al parecer, el establecimiento de la anchura de la tabla a algo fuerzas muy pequeñas para romper el texto y tomar menos espacio horizontal. Sin embargo, las palabras no se romperán, por lo que la tabla terminará siendo al menos lo suficientemente grande para la palabra más grande de cada columna.

Probado probado y verdadero en:

Linux (Ubuntu 10,04)

• Firefox 3.6.18
• cromo navegador 12.0.742.112 (90304) cualquiera que sea todo lo que significa
• Konqueror 4.5.3
• SeaMonkey 2.0.11

de Windows:

• Internet Explorer 7
• Firefox 4.0.1

Si alguien (no puedo en mi situación actual) podría poner a prueba esta en últimas versiones de Internet Explorer, Firefox, Chrome, Safari y Opera y dejar un comentario o editar esta respuesta, que sería impresionante !