Tabla con width:100% que no redimensiona
No estoy seguro de cual es el problema pero creo que va por ahí (asunto).
Tengo una tabla con width:100% dentro de un div con width/height fijos y overflow: auto.
El problema viene cuando el contenido de la div se alarga, en Firefox/Opera la tabla se redimensiona y me aparece el scroll lateral en la div (comportamiento correcto), en IE6-7 la tabla no redimensiona y me aparecen scroll lateral y inferior: esto es lo que me gustaria evitar.
Puedo darle un ancho fijo a la tabla (para evitar el scroll horizontal) pero entonces los margenes no seran los correctos/deseados cuando el contenido no sobrepase el largo de la div.
Podeis ver el problema AQUÍ, fijaros en el apartado PATOLOGIA.
La css de la tabla:
<code>#contingut table {
width:100%;
margin:5px 0 5px 0;
padding:0;
}
html>body #contingut table {
margin:3px 0 3px 0;
padding:0;
}
#contingut table tr{
margin:0;
padding:0;
}
#contingut table td{
background:#F4F4F4;
margin:0;
padding:0;
text-align: center;
vertical-align:top;
}</code>
La css de la capa contenedora:
<code>#patologia_contingut {
margin:5px 0 0 0;
padding:5px 4px 0 7px;
border:#D6D6D6 1px solid;
width:197px;
height:350px;
overflow:auto;
}</code>
Perdon por el rollazo, espero haberme explicado bien.
gracias,
albert.
amcdesignz
jimp19
Con esto lo puedes solucionar, es codigo propietario de explorer. Con esto el scroll horizontal no te saldra.
overflow-x: hidden;
En este enlace la informacion sobre overflow-x
Gracias jimp19, el código me sirve para anular el scroll horizontal pero el problema sigue existiendo, la tabla no redimensiona y al aparecer el scroll vertical este "pisa" el contenido...
jimp19
Pues no sabia que estaba en la especificacion de css3, hace un tiempo tuve ese mismo problema y donde lo busque decia que era codigo solo soportado por explorer.
tendre que empezar a estudiar css3 ... :-)
orange
¿Cómo que es código propietario?, lo que pasa es que forma parte de la especificación CSS3 y todavía no está completamente soportado por los navegadores actuales (FireFox no lo ha hecho hasta la versión 2.0)
CSS3 - OverFlow
http://www.w3.org/TR/css3-box/#the-overflow-x
Sin mirarme el código a fondo, imagino que con lo del overflow se soluciona el problema, la causa puede venir de la mala interpretación que haga Explorer de algún pequeño margin.
jimp19
Con esto lo puedes solucionar, es codigo propietario de explorer. Con esto el scroll horizontal no te saldra.
overflow-x: hidden;
En este enlace la informacion sobre overflow-x
amcdesignz
Ya se que es viernes... pero nadie me hecha un cable...?
Ufff...