Foros del Web » Creando para Internet » CSS »

tabla dentro de div

Estas en el tema de tabla dentro de div en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 12/02/2007, 11:02
 
Fecha de Ingreso: febrero-2007
Ubicación: En lima
Mensajes: 76
Antigüedad: 10 años, 10 meses
Puntos: 2
Pregunta tabla dentro de div

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,
  #2 (permalink)  
Antiguo 12/02/2007, 12:05
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: tabla dentro de div

Buenas.
Creo que bastará con que cambies:

.documento table{
width:600px;
}

por:

.documento table{
width:100%;
}

Mikel.
  #3 (permalink)  
Antiguo 12/02/2007, 18:15
 
Fecha de Ingreso: febrero-2007
Ubicación: En lima
Mensajes: 76
Antigüedad: 10 años, 10 meses
Puntos: 2
Re: tabla dentro de div

Bueno mikel gracias por la suderencia pero ya la probe y sigue saliendose de la capa no tendran por ahi otra idea.
  #4 (permalink)  
Antiguo 12/02/2007, 18:24
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: tabla dentro de div

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.
  #5 (permalink)  
Antiguo 12/02/2007, 18:33
 
Fecha de Ingreso: febrero-2007
Ubicación: En lima
Mensajes: 76
Antigüedad: 10 años, 10 meses
Puntos: 2
Re: tabla dentro de div

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.
  #6 (permalink)  
Antiguo 12/02/2007, 18:42
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: tabla dentro de div

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.
  #7 (permalink)  
Antiguo 12/02/2007, 18:48
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: tabla dentro de div

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.
  #8 (permalink)  
Antiguo 13/02/2007, 13:08
 
Fecha de Ingreso: febrero-2007
Ubicación: En lima
Mensajes: 76
Antigüedad: 10 años, 10 meses
Puntos: 2
Re: tabla dentro de div

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
  #9 (permalink)  
Antiguo 13/02/2007, 13:25
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: tabla dentro de div

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.
  #10 (permalink)  
Antiguo 13/02/2007, 14:53
 
Fecha de Ingreso: febrero-2007
Ubicación: En lima
Mensajes: 76
Antigüedad: 10 años, 10 meses
Puntos: 2
Sonrisa Re: tabla dentro de div

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.
  #11 (permalink)  
Antiguo 13/02/2007, 15:25
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: tabla dentro de div

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.
  #12 (permalink)  
Antiguo 14/02/2007, 07:21
 
Fecha de Ingreso: febrero-2007
Ubicación: En lima
Mensajes: 76
Antigüedad: 10 años, 10 meses
Puntos: 2
De acuerdo Re: tabla dentro de div

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

Jaime.

Última edición por jtoribioa; 14/02/2007 a las 09:04
  #13 (permalink)  
Antiguo 14/02/2007, 12:20
 
Fecha de Ingreso: febrero-2007
Ubicación: En lima
Mensajes: 76
Antigüedad: 10 años, 10 meses
Puntos: 2
Re: tabla dentro de div

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
  #14 (permalink)  
Antiguo 14/02/2007, 17:24
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: tabla dentro de div

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.
  #15 (permalink)  
Antiguo 15/02/2007, 15:32
 
Fecha de Ingreso: febrero-2007
Ubicación: En lima
Mensajes: 76
Antigüedad: 10 años, 10 meses
Puntos: 2
Re: tabla dentro de div

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
  #16 (permalink)  
Antiguo 15/02/2007, 17:47
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: tabla dentro de div

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.
  #17 (permalink)  
Antiguo 16/02/2007, 07:16
 
Fecha de Ingreso: febrero-2007
Ubicación: En lima
Mensajes: 76
Antigüedad: 10 años, 10 meses
Puntos: 2
Re: tabla dentro de div

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
  #18 (permalink)  
Antiguo 16/02/2007, 08:00
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: tabla dentro de div

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.
  #19 (permalink)  
Antiguo 16/02/2007, 08:29
 
Fecha de Ingreso: febrero-2007
Ubicación: En lima
Mensajes: 76
Antigüedad: 10 años, 10 meses
Puntos: 2
Re: tabla dentro de div

wow interesante ya habia visto que muchos usan esa propiedad "important" pero nunca entendia, ahora ya me quedo claro , Gracias Mikel
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 11:23.