Foros del Web » Creando para Internet » CSS »

Tabla invisible

Estas en el tema de Tabla invisible en el foro de CSS en Foros del Web. Hola! que tal? Tengo el siguiente problema: deseo poner "hidden" a una tabla completa para que no la muestre. No quiero utilizar div. Que me ...
  #1 (permalink)  
Antiguo 29/07/2011, 15:00
Avatar de eliza_ralves  
Fecha de Ingreso: junio-2009
Ubicación: Caracas
Mensajes: 126
Antigüedad: 7 años, 11 meses
Puntos: 2
Exclamación Tabla invisible

Hola! que tal? Tengo el siguiente problema:

deseo poner "hidden" a una tabla completa para que no la muestre. No quiero utilizar div.

Que me sugieren?

No necesito que se muestre dado un boton, sólo quiero poner invisible la tabla para que sólo me muestre la grafica y no la tabla con los datos de dicha grafica.

Gracias de antemano!

Código HTML:
<table border="0" id="datatable"  cellpadding="5" cellspacing="5" >
   <thead>
           <tr>
                <th></th>
               <th>Proyecto</th>
              <th>Actividad</th>
           </tr>
 </thead>
 <tbody>
          <tr>
                <th>Mes</th>
                <td>4</td>
                <td>5</td>
         </tr>
          <tr>
                <th>Mes</th>
                <td>4</td>
                <td>5</td>
         </tr>
 </tbody>
</table> 
__________________
“El mayor enemigo del conocimiento no es la ignorancia, sino la ilusión del conocimiento”— Stephen Hawking
  #2 (permalink)  
Antiguo 29/07/2011, 15:14
Avatar de pitufoweb  
Fecha de Ingreso: enero-2008
Ubicación: Un Mundo Raro
Mensajes: 1.147
Antigüedad: 9 años, 4 meses
Puntos: 181
Respuesta: Tabla invisible

No entendí muy bien lo quieres hacer.

mmm... puedes probar con display:none;



Saludos
__________________
------------- " La felicidad no llega de afuera, nace desde dentro. " -------------
  #3 (permalink)  
Antiguo 29/07/2011, 16:38
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 8 años, 11 meses
Puntos: 1010
Respuesta: Tabla invisible

tampoco he entendido que es lo que quieres conseguir. si ocultas la tabla, ocultas los datos que contiene esa tabla. tal vez sea tan sencillo como cambiar el valor de una propiedad del selector css que se aplica a la tabla. o directamente eliminar esa propiedad.

no sé, es dar palos de ciego
  #4 (permalink)  
Antiguo 30/07/2011, 09:41
Avatar de infiero  
Fecha de Ingreso: marzo-2006
Mensajes: 38
Antigüedad: 11 años, 2 meses
Puntos: 3
Respuesta: Tabla invisible

esa tabla no tiene estilo ni bordes ni nada, por lo tanto no tiene que mostrarte nada de la tabla lo unico q si queres que no este tan separado elimina el cellpadding="5" cellspacing="5"
  #5 (permalink)  
Antiguo 30/07/2011, 12:52
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 8 años, 11 meses
Puntos: 1010
Respuesta: Tabla invisible

Cita:
Iniciado por infiero Ver Mensaje
esa tabla no tiene estilo ni bordes ni nada, por lo tanto no tiene que mostrarte nada de la tabla lo unico q si queres que no este tan separado elimina el cellpadding="5" cellspacing="5"
puedes explicar por qué crees que a la tabla no se le está aplicando css??
Cita:
id="datatable"
  #6 (permalink)  
Antiguo 30/07/2011, 12:58
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 9 años, 11 meses
Puntos: 1567
Respuesta: Tabla invisible

a los que no entendieron muy bien, les aclaro que yo entiendo menos

@eliza_ralves, me podrías aclarar el significado de

Cita:
sólo quiero poner invisible la tabla para que sólo me muestre la grafica ...
sobre todo el alcance del término "gráfica"

Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #7 (permalink)  
Antiguo 30/07/2011, 13:29
Avatar de eliza_ralves  
Fecha de Ingreso: junio-2009
Ubicación: Caracas
Mensajes: 126
Antigüedad: 7 años, 11 meses
Puntos: 2
Respuesta: Tabla invisible

hola que tal? No vi el post sino hasta ahora.

La cuestiòn es es tomo los datos de esa tabla para crear una gráfica estadística con javascript, es decir, ajuro se tiene que crear la tabla para que me pueda crear dicha gràfica de datos.

El problema està, en que yo no quiero que se muetren los datos (la tabla) en la pagina web.

He visto en este foro que lo que necesita la mayoria es ocultar mediante de un script por medio de un botòn: haces clik y aparece, haces click desaparece.

Pero lo que no quiero es dicho boton.

Hay otra opciòn que es colocar div y poner hidden, pero si se lo coloco, no se forma dicha gràfica.

Espero ahora si me puedan entender ...
__________________
“El mayor enemigo del conocimiento no es la ignorancia, sino la ilusión del conocimiento”— Stephen Hawking
  #8 (permalink)  
Antiguo 30/07/2011, 14:14
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 9 años, 11 meses
Puntos: 1567
Respuesta: Tabla invisible

Suerte que encontré
http://www.asihablamos.com/word/palabra/Ajuro.php

Ahora entiendo más, al menos en mi experiencia, ocultar los table tbody theader... con css no podés a menos que uses

visibility: hidden;
ó
display: none;

Si con ninguna de esas dos alternativas, te funciona el javascritp, habria que ver justamente el javascript para verificar si hay alguna otra forma de recuperar los datos.

Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #9 (permalink)  
Antiguo 30/07/2011, 18:48
Avatar de infiero  
Fecha de Ingreso: marzo-2006
Mensajes: 38
Antigüedad: 11 años, 2 meses
Puntos: 3
Respuesta: Tabla invisible

Cita:
Iniciado por IsaBelM Ver Mensaje
puedes explicar por qué crees que a la tabla no se le está aplicando css??
mostrame el css
  #10 (permalink)  
Antiguo 30/07/2011, 20:39
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 9 años, 11 meses
Puntos: 1567
Respuesta: Tabla invisible

@eliza_ralves:

No quiero alejarme del objetivo que planteas en el post.
Como me quedé algo curioso, estuve investigando y encontre varias aplicaciones (la mayoría basadas en jQuery) para crear gráficos a partir de datos en una tabla, no tenía idea de tal cosa, pero las demos que vi me parecieron espectaculares, ya les voy a sacar el jugo.

No sé cual usas vos, pero de las que analicé, cualquier modificación que le hagas a la tabla via css o via atributos, se refleja en el gráfico, y obviamente la tabla está siempre visible, (visibility:hidden o display:none eliminan los datos de los gráficos).
Así que encontré 2 soluciones, que puede llegar a resultar.

Para mi ejemplo trabajé en particular con esta

http://dwpe.googlecode.com/files/dwp...lic-latest.zip

descomprimila y en la carpeta /charting vas a ver un un index.html.
Sobre ese archivo hice estas modificaciones

Solución uno:
un poco mas complicada, pero todo depende de como tengas el resto de tu estructurada tu página

Código HTML:
Ver original
  1. <div style="width: 520px; height: 280px; position: absolute; top: 0px; left: 0px; z-index: 100; background-color: #FFF;">Detrás de esta capa esta la tabla-gráfico</div>
  2. <div style="width: 100%; height: auto; position: absolute; top: 0px; left: 0px; z-index: 1;">
  3.     <caption>2009 Employee Sales by Department</caption>
  4.     <thead>
  5.         <tr>
  6.             <td></td>
  7.             <th scope="col">food</th>
  8.             <th scope="col">auto</th>
  9.             <th scope="col">household</th>
  10.             <th scope="col">furniture</th>
  11.             <th scope="col">kitchen</th>
  12.             <th scope="col">bath</th>
  13.         </tr>
  14.     </thead>
  15.     <tbody>
  16.         <tr>
  17.             <th scope="row">Mary</th>
  18.             <td>190</td>
  19.             <td>160</td>
  20.             <td>40</td>
  21.             <td>120</td>
  22.             <td>30</td>
  23.             <td>70</td>
  24.         </tr>
  25.         <tr>
  26.             <th scope="row">Tom</th>
  27.             <td>3</td>
  28.             <td>40</td>
  29.             <td>30</td>
  30.             <td>45</td>
  31.             <td>35</td>
  32.             <td>49</td>
  33.         </tr>
  34.         <tr>
  35.             <th scope="row">Brad</th>
  36.             <td>10</td>
  37.             <td>180</td>
  38.             <td>10</td>
  39.             <td>85</td>
  40.             <td>25</td>
  41.             <td>79</td>
  42.         </tr>
  43.         <tr>
  44.             <th scope="row">Kate</th>
  45.             <td>40</td>
  46.             <td>80</td>
  47.             <td>90</td>
  48.             <td>25</td>
  49.             <td>15</td>
  50.             <td>119</td>
  51.         </tr>      
  52.     </tbody>
  53. </table>   
  54. </div>

es decir, encerré la tabla en un div con position: absolute, y cree otro div con la misma ubicación pero con un z-index mayor. Con eso se oculta la tabla y los graficos no pierden funcionalidad. sólo sería cosa de aprovechar esa capa en primer plano para poner algún otro contenido de tu página.


Solución 2:

Mucho mas sencillo, no hace falta ningun div, simplemente un margen supeior negativo a la tabla


Código HTML:
Ver original
  1. <table style="margin-top: -280px">
  2.     <caption>2009 Employee Sales by Department</caption>
  3.     <thead>
  4.         <tr>
  5.             <td></td>
  6.             <th scope="col">food</th>
  7.             <th scope="col">auto</th>
  8.             <th scope="col">household</th>
  9.             <th scope="col">furniture</th>
  10.             <th scope="col">kitchen</th>
  11.             <th scope="col">bath</th>
  12.         </tr>
  13.     </thead>
  14.     <tbody>
  15.         <tr>
  16.             <th scope="row">Mary</th>
  17.             <td>190</td>
  18.             <td>160</td>
  19.             <td>40</td>
  20.             <td>120</td>
  21.             <td>30</td>
  22.             <td>70</td>
  23.         </tr>
  24.         <tr>
  25.             <th scope="row">Tom</th>
  26.             <td>3</td>
  27.             <td>40</td>
  28.             <td>30</td>
  29.             <td>45</td>
  30.             <td>35</td>
  31.             <td>49</td>
  32.         </tr>
  33.         <tr>
  34.             <th scope="row">Brad</th>
  35.             <td>10</td>
  36.             <td>180</td>
  37.             <td>10</td>
  38.             <td>85</td>
  39.             <td>25</td>
  40.             <td>79</td>
  41.         </tr>
  42.         <tr>
  43.             <th scope="row">Kate</th>
  44.             <td>40</td>
  45.             <td>80</td>
  46.             <td>90</td>
  47.             <td>25</td>
  48.             <td>15</td>
  49.             <td>119</td>
  50.         </tr>      
  51.     </tbody>

Por supuesto que esta es solo una variante, no analicé en detalle las demas scripts que encontré para esto, quizás alguna no necesite de la tabla visible.

Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #11 (permalink)  
Antiguo 01/08/2011, 06:15
Avatar de eliza_ralves  
Fecha de Ingreso: junio-2009
Ubicación: Caracas
Mensajes: 126
Antigüedad: 7 años, 11 meses
Puntos: 2
Respuesta: Tabla invisible

Gracias empear!!! excelente idea!!

El JQuery que utilizo para crear gráficos es de la página de Highcharts, pero igual me funcionó.

Otra cosa que hice (después de realizar varias pruebas) es colocarle el color del texto igual al fondo de mi página web.

Código HTML:
<table class="datatable" border="0" id="datatable"  cellpadding="5" cellspacing="5" summary="Presentacion del grafico estadiastico"> 
y en el CSS:

Código:
table.datatable{
    color: #F1F1F1;
    margin-top: -500px
}
Así, cuando la búsqueda de los valores a gráficar sea muy grande y sobrepase el margen, sea invisible.

__________________
“El mayor enemigo del conocimiento no es la ignorancia, sino la ilusión del conocimiento”— Stephen Hawking
  #12 (permalink)  
Antiguo 01/08/2011, 08:07
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 9 años, 11 meses
Puntos: 1567
Respuesta: Tabla invisible

No, de nada. Y gracias a vos, porque ese Hightcharts que mencionás, supera todo lo que ví.
@eliza_ralves, te agrego una pregunta... viste las demos? porque ahi la tabla no aparece, solo los gráficos, si investigas un poco la documentación/configuración, seguro ahi está la respuesta, sin hacer uso de otras técnicas.
Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #13 (permalink)  
Antiguo 01/08/2011, 12:09
Avatar de eliza_ralves  
Fecha de Ingreso: junio-2009
Ubicación: Caracas
Mensajes: 126
Antigüedad: 7 años, 11 meses
Puntos: 2
Respuesta: Tabla invisible

hola! si, si las vi.

De todas maneras tuve que hacer una pequeña modificación de estilo, agregándole un scroll "invisible", para que así no se me corra el footer de la pagina.

En el CSS:
Código:
table.datatable{
    color: #F1F1F1;
}

div.scroll-grafico {
    position: relative;
    height: 60px;
    width: 250px;
    overflow-y: hidden;
    overflow-x: hidden;
}
En el HTML:
Código HTML:
<div class="scroll-grafico">
    <table class="datatable" border="0" id="datatable"  cellpadding="5" cellspacing="5" >
     </table>
</div> 
__________________
“El mayor enemigo del conocimiento no es la ignorancia, sino la ilusión del conocimiento”— Stephen Hawking

Etiquetas: invisible, tabla
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 19:30.