tabla dentro de div

jtoribioa · #1 (**permalink**) 12/02/2007, 11:02

holas a todos, a ver si me podrian ayudar con este pequeño problema, bueno lo que pasa es que tengo una tabla dentro un div y yo quiero que esa tabla se acomode del tamaño del ancho de mi capa, osea que si redimenciono la capa se redimencione la tabla , habra alguna forma de hacerlo con css?

aqui les dejo la forma de mi html

Código HTML:

<html>
...
<div id="contenedor">
     ......
     <div id="cuerpo">
     ......
          <div class="documento">
              <form ....>
                 <table>
                    <tr>
                        <td>titulo 1</td>
                        <td>titulo 2</td>
                        <td>titulo 3</td>
                        <td>titulo 4</td>
                    </tr>
                    <tr>
                        <td><input type="text" name="1"></td>
                        <td><input type="text" name="2"></td>
                        <td><input type="text" name="3"></td>
                        <td><input type="text" name="4"></td>
                    </tr>
                 </table>
              </form>
          </div>
     </div>
</div>
</html>

aqui el css

#contenedor{
margin: 10px auto;
height: 550px;
width: 800px;
border-color: #FFFFFF;
border-style: solid;
border-width: 10px;
position: relative;
}
#cuerpo{
text-align:center;
z-index:0;/*por que existen otra capas q deben ir encima*/
position: absolute;
height: 380px;
width: 800px;
border-top: 2px solid #FFFFFF;
border-bottom: 2px solid #FFFFFF;
}
.documento table{
width:600px;
}

Espero que me puedan ayudar. Gracias por adelantado,

Mikmoro · #2 (**permalink**) 12/02/2007, 12:05

Buenas.
Creo que bastará con que cambies:

.documento table{
width:600px;
}

por:

.documento table{
width:100%;
}

Mikel.

jtoribioa · #3 (**permalink**) 12/02/2007, 18:15

Bueno mikel gracias por la suderencia pero ya la probe y sigue saliendose de la capa no tendran por ahi otra idea.

Mikmoro · #4 (**permalink**) 12/02/2007, 18:24

Al margen de que otros ofrezcan otras ideas... ¿me puedes explicar un poco qué quiere decir que se sale? y ¿de qué capa? Seguramente es que no he entendido qué es lo que ocurre y qué quieres conseguir.

Mikel.

jtoribioa · #5 (**permalink**) 12/02/2007, 18:33

Gracias por la rapides, lo que se sale es la tabla de la capa documento quiero que la tabla sea del tamaño(en ancho) de la capa , osea que si redimenciono la capa ocumento la tabla se redimencione.
Ya intente varias formas pero casi simpre se sale de la capa.
espero haberme dejado enender, gracias.

Mikmoro · #6 (**permalink**) 12/02/2007, 18:42

Pero... entonces hay algo que no entiendo: la tabla no se puede salir de la capa "documento" porque esa capa no está definida en tu ejemplo, no tiene tamaño ni nada como para poder verla. ¿Cómo sabes que se sale?.

Estoy seguro de que hay algo que se me escapa.

Mikel.

Mikmoro · #7 (**permalink**) 12/02/2007, 18:48

Si definimos la capa "documento" y le damos un borde para que se vea, vemos que es imposible que la tabla se salga de ella.

.documento table { width: 100%;
}

.documento { border-style: solid;
}

Mikel.

jtoribioa · #8 (**permalink**) 13/02/2007, 13:08

holas mikel mira este link y veras mi duda ya probe poniendo borde y todo lo que me dijiste pero no sale.
En la web del link le puse lo qe me dijiste pero no sale.
es.geocities.com/toribio_jaime88/ejemplo.html

Mikmoro · #9 (**permalink**) 13/02/2007, 13:25

Claro, pero es que tienes puesto un tamaño de 500px al contendor "documento", que en tu primer ejemplo no aparecía. Yo diría que la tabla se sale porque la suma de los campos de texto y sus espacios es mayor de 500 px. Para comprobarlo, quita el tamaño de 500px y creo que la tabla se ajustará al contenido.

Y no te decía que poniendo el borde se fuera a solucionar nada (estaría bueno

), sino que lo pusieras para poder ver el tamaño del div "documento", que claro, tú ya veías porque tenía un fondo y un tamaño, que no habías comentado.

Mikel.

jtoribioa · #10 (**permalink**) 13/02/2007, 14:53

Bueno mikel gracias por las repuesta mi idea era que poniendole css a la tabla esta se acomode al tamaño de la capa pero como dices el tamaño de las cajas de texto siempre hara que se salga de la capa.
y no puedo quitarle el tamaño de 500px por que al lado de la capa documento quiero poner otro formulario y si le quito el 500p no cabria este nueo formulario.
En fin la unica solucion que me queda es ponerle porcentajes a cada td para que entre la tabla dentro de la capa.

Gracias por la atencion.

Mikmoro · #11 (**permalink**) 13/02/2007, 15:25

Aunque les pongas porcentajes a las celdas no te va a caber. Como te decía es un problema del tamaño de los campos de texto, y las celdas no las vas a poder reducir de ninguna manera. Lo único que puedes hacer, creo yo, es ponerles un tamaño a los campos de size="11", que es lo máximo que te admite para 5 campos en un div de 500px.

Espero que te sirva.

Mikel.

jtoribioa · #12 (**permalink**) 14/02/2007, 07:21

Gracias Mikel y le di tamaños a los input y se arreglo aunque no es tan automatico como queria pero funciona , gracias

Jaime.

jtoribioa · #13 (**permalink**) 14/02/2007, 12:20

Holas Mikel despues de tanto pensar se me ocurrio pasar la tabla ha pequeñas capas mas o menos asi : es.geocities.com/toribio_jaime88/ejemplo2.html. y creo que esa era la mejor solucion para lo que necesitaba.
Espero tus opiniones.
porsiacaso trata de mirarlo en explorer primero a veces no se e bien en firefox.
bye

Mikmoro · #14 (**permalink**) 14/02/2007, 17:24

Hola, jtoribioa.
Como en tu selector #documento no tienes puesto tamaño de alto (height), creo que bastará con que le añadas:

overflow: auto;

Prueba y ya contarás.

Mikel.

P.D.: a mi, esta que has usado ahora me parece mejor solución que la tabla.

jtoribioa · #15 (**permalink**) 15/02/2007, 15:32

holas ya habia probado con el overflow pero no me gusta, quiero que la pagina sea simple y que el usuario no tenga que usar mucho el mouse si te das cuenta con el overflow hay que usar el mouse para ver lo que no entra en el documento, asi que me quedo con lo que hice en ultima.
Gracias por haber tratado de ayudarme.

Saludos

Mikmoro · #16 (**permalink**) 15/02/2007, 17:47

Bueno, en realidad es culpa mia: no te expliqué que firefox necesita ese overflow y no sacará ninguna barra de scroll, mientras que explorer no lo necesita, y sí sacará las barras de scroll.

Por suerte la solución es fácil:

overflow: auto ! important;
overflow: none;

Estas son las dos propiedades que debes añadir al selector #documento.

Mikel.

jtoribioa · #17 (**permalink**) 16/02/2007, 07:16

Interesante solucion

, arreglo mis problemas con firefox pero que significa.
No es por molestar pero me gusta saber como funciona asi se me graba mejor en la mente.
Saludos

Mikmoro · #18 (**permalink**) 16/02/2007, 08:00

Si una propiedad lleva puesto important, significa que si hay otra igual en el estilo, prevalezca por encima de la segunda. De esa manera, si pones un height seguido de important y luego otra vez height sin más, los navegadores inteligentes harán caso a la que lleva important (la palabra en sí es muy clara).

¿Para qué sirve en tu caso? Explorer no entiende la propiedad important, entonces siempre hace caso a la última propiedad que encuentre, de manera que si encuentra:

overflow: auto ! important;
overflow: none;

Primero lee "auto", después lee "none" para esa propiedad. Los demás navegadores saben que aunque "none" se lea después, deben ejecutar "auto" porque lleva ! important, pero explorer no, así que tenemos que Firefox interpreta overflow: auto; y explorer overflow: none;. Así de simple.

Mikel.

jtoribioa · #19 (**permalink**) 16/02/2007, 08:29

wow interesante ya habia visto que muchos usan esa propiedad "important" pero nunca entendia, ahora ya me quedo claro , Gracias Mikel