Quiero crear un diagrama usando HTML. Usé una mesa con columnas fijas. Todo se ve bien, pero si el contenido de la celda es demasiado largo, el ancho de la columna se expande. Me gustaría que el ancho de la columna permanezca fijo, incluso si parte del contenido está oculto.Celdas de tabla HTML de tamaño fijo, incluso cuando el contenido es demasiado grande?
¿Hay alguna manera de hacerlo?
Además de la respuesta de @ barrylloyd, sugeriría que también lo usen:
td,th {
min-width: 3em; /* the normal 'fixed' width */
width: 3em; /* the normal 'fixed' width */
max-width: 3em; /* the normal 'fixed' width, to stop the cells expanding */
}
El min-width podría ser innecesario, pero cubre todas las bases.
¡Muchas gracias! La combinación de overflow: hidden y max-width: 1em hizo el truco! – Noam
¿Qué hay de CSS para abordarlo:
td { overflow: hidden; }
probablemente debería ser suficiente.
No creo que un 'td' respete la propiedad' overflow'. – founddrama
Try ...
tabla {table-layout: fijo}
en su hoja de estilo.
Esto obliga al navegador para usar el algoritmo de diseño mesa fija ...
Mesa fija algoritmo de diseño:
- La disposición horizontal solamente depende de la anchura de la mesa y el ancho de las columnas , no el contenido de las celdas
- Permite que un navegador distribuya la tabla más rápido que el diseño de tabla automática
- El navegador puede comenzar a mostrar la tabla una vez fila primera se ha recibido
Lo único que añadiría a esto es que el texto aún podría desbordar el 'td' (por ejemplo, si tiene una cadena súper larga) y que si * eso * sucede, entonces desea considerar envolver los contenidos' td' en un 'div' con' overflow: auto' set. – founddrama
posible duplicado de [CSS: ¿Cómo establecer el ancho de columna de la tabla constante independientemente de la cantidad de texto en sus celdas?] (Http://stackoverflow.com/questions/4457506/css-how-to-set-the -table-column-width-constant-however-of-the-amount-of-text) –