Contenedor div desbordante de tabla de 100% de ancho

Tengo problemas con una tabla html que está desbordando su contenedor primario. Configuré a sample jsfiddle here para ilustrar el problema.Contenedor div desbordante de tabla de 100% de ancho

¿Cómo puedo forzar tanto el texto del encabezado como el texto de la celda de la tabla para que se ajuste de manera que encaje en su contenedor correctamente? Preferiría un método de solo CSS, pero también estoy dispuesto a usar Javascript (o jQuery) si es absolutamente necesario.

Fuente

2011-07-06 Victor

142

Desde una perspectiva puramente "que se ajuste en el div", añada lo siguiente a su clase de mesa (jsfiddle):

table-layout:fixed; 
width: 100%;

_{Ver fixed frente automatic disposición de la tabla.}

Fuente

2011-07-06 18:31:55 canon

+30

El problema es que este método hace que todas las columnas tengan el mismo ancho, no exactamente ideal –

@SerjSagan Solo hace que las columnas tengan el mismo ancho porque no hemos establecido explícitamente un ancho para ninguna columna. En ausencia de un ancho de columna, el algoritmo de ancho fijo distribuye el ancho restante de la tabla de manera uniforme entre las columnas no dimensionadas. En este caso, es un ancho de tabla del 100% sobre 5 columnas. Ese es el punto de 'table-layout: fixed' ... el diseño es predecible y no se ajusta a los contenidos. O bien especifica ancho de columna o el algoritmo decide por usted. – canon

@canon Acabo de reconocer que esto no funciona cuando cambia el tamaño de una celda con ancho mínimo, al menos en Chrome. Ver http://jsfiddle.net/dtttLqgw/1/. – needfulthing

Agregue display: block; y overflow: auto; a .my-table. Esto simplemente cortará cualquier cosa más allá del límite de 280px que aplica. No hay forma de que se vea "bonito" con ese requisito debido a palabras como pélagosthrough que son más anchas que 280px.

Fuente

2011-07-06 18:28:46

Bueno, dadas sus limitaciones, creo que la configuración de overflow: scroll; en el .page div es probablemente su única opción. 280 px es bastante estrecho, y dado el tamaño de la fuente, el ajuste de palabras por sí solo no lo va a hacer. Algunas palabras son largas y no se pueden envolver. Puede reducir el tamaño de su fuente drásticamente o ir con desbordamiento: desplazamiento.

Fuente

2011-07-06 18:32:28

Trate de añadir

word-break: break-all

a la CSS en el elemento de la tabla.

Eso hará que las palabras en las celdas de la tabla se rompan de tal manera que la tabla no crezca más que su div, pero las columnas de la tabla todavía tienen un tamaño dinámico. jsfiddle demo.

Fuente

2013-10-09 20:34:54

Mejor aún con 'word-wrap: break-word;' – Apolo

@Apolo - ¡De acuerdo! Lo usé también en mi demo jsfiddle original (ver el enlace en el cuerpo de respuestas más arriba). –

Los navegadores de parpadeo tienen 'word-break: break-word' que funciona mejor. – Volvox

Trate de añadir a td:

display: -webkit-box; // to make td as block 
word-break: break-word; // to make content justify

TDS desbordadas se alinearán con nueva fila.

Fuente

2017-12-21 06:29:11 usernaveen

Contenedor div desbordante de tabla de 100% de ancho

Respuesta

Cuestiones relacionadas