name - thead html

¿Cómo puedo evitar que mi tabla html se estire

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

Acabo de tener el mismo problema y terminé resolviéndolo 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. */ }

Aparentemente, establecer el ancho de la tabla en algo muy pequeño lo obliga a dividir el texto y tener menos espacio horizontal. Sin embargo, las palabras no se dividirá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
• Chromium-browser 12.0.742.112 (90304) lo que sea que signifique
• Konqueror 4.5.3
• SeaMonkey 2.0.11

Windows:

• Internet Explorer 7
• Firefox 4.0.1

Si alguien (no puedo en mi situación actual) podría probar esto en las últimas versiones de IE, Firefox, Chrome, Safari y Opera y dejar un comentario o editar esta respuesta, ¡sería increíble!

Answer 2

Establece el ancho y el alto de la etiqueta td usando CSS. Entonces tienes que lidiar con el desbordamiento.

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

Answer 3

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

Consulte http://www.w3.org/TR/CSS2/tables.html#fixed-table-layout para obtener una explicación detallada.

Answer 4

Si es absolutamente necesario que la tabla mantenga su diseño incluso en los espacios sin interrupciones, deberá usar:

 overflow: hidden;

Sin embargo, lo recomendaría en contra. En mi opinión, es más importante tener los datos legibles que el diseño perfecto.

Answer 5

Suponiendo que no tenga espacios sin interrupciones o texto súper largo sin un espacio en la celda, generalmente tuve la mejor suerte al establecer explícitamente el ancho de dicha celda a través de CSS (parece funcionar mejor que hacer algo como "width = ''100''". Si los datos en la celda son solo una cadena realmente larga, no hay mucho que puedas hacer aparte de truncarla programáticamente, o envolver los datos en un div con un ancho explícito y algo como desbordamiento: oculto / auto (auto si quieres una barra de desplazamiento horizontal o algo así).

Answer 6

Usar overflow: hidden para ocultar el desbordamiento como tal:

td, th {
    overflow: hidden;
}

Para que esto funcione, a sus etiquetas <td> o <th> se les debe asignar un ancho.