Tabla invisible

eliza_ralves · #1 (**permalink**) 29/07/2011, 15:00

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>

pitufoweb · #2 (**permalink**) 29/07/2011, 15:14

No entendí muy bien lo quieres hacer.

mmm... puedes probar con display:none;

Saludos

IsaBelM · #3 (**permalink**) 29/07/2011, 16:38

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

infiero · #4 (**permalink**) 30/07/2011, 09:41

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"

IsaBelM · #5 (**permalink**) 30/07/2011, 12:52

Cita:

Iniciado por infiero

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"

emprear · #6 (**permalink**) 30/07/2011, 12:58

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

eliza_ralves · #7 (**permalink**) 30/07/2011, 13:29

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 ...

emprear · #8 (**permalink**) 30/07/2011, 14:14

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

infiero · #9 (**permalink**) 30/07/2011, 18:48

Cita:

Iniciado por IsaBelM

puedes explicar por qué crees que a la tabla no se le está aplicando css??

mostrame el css

emprear · #10 (**permalink**) 30/07/2011, 20:39

@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<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>
<div style="width: 100%; height: auto; position: absolute; top: 0px; left: 0px; z-index: 1;">
<table>
    <caption>2009 Employee Sales by Department</caption>
    <thead>
        <tr>
            <td></td>
            <th scope="col">food</th>
            <th scope="col">auto</th>
            <th scope="col">household</th>
            <th scope="col">furniture</th>
            <th scope="col">kitchen</th>
            <th scope="col">bath</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">Mary</th>
            <td>190</td>
            <td>160</td>
            <td>40</td>
            <td>120</td>
            <td>30</td>
            <td>70</td>
        </tr>
        <tr>
            <th scope="row">Tom</th>
            <td>3</td>
            <td>40</td>
            <td>30</td>
            <td>45</td>
            <td>35</td>
            <td>49</td>
        </tr>
        <tr>
            <th scope="row">Brad</th>
            <td>10</td>
            <td>180</td>
            <td>10</td>
            <td>85</td>
            <td>25</td>
            <td>79</td>
        </tr>
        <tr>
            <th scope="row">Kate</th>
            <td>40</td>
            <td>80</td>
            <td>90</td>
            <td>25</td>
            <td>15</td>
            <td>119</td>
        </tr>       
    </tbody>
</table>    
</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<table style="margin-top: -280px">
    <caption>2009 Employee Sales by Department</caption>
    <thead>
        <tr>
            <td></td>
            <th scope="col">food</th>
            <th scope="col">auto</th>
            <th scope="col">household</th>
            <th scope="col">furniture</th>
            <th scope="col">kitchen</th>
            <th scope="col">bath</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">Mary</th>
            <td>190</td>
            <td>160</td>
            <td>40</td>
            <td>120</td>
            <td>30</td>
            <td>70</td>
        </tr>
        <tr>
            <th scope="row">Tom</th>
            <td>3</td>
            <td>40</td>
            <td>30</td>
            <td>45</td>
            <td>35</td>
            <td>49</td>
        </tr>
        <tr>
            <th scope="row">Brad</th>
            <td>10</td>
            <td>180</td>
            <td>10</td>
            <td>85</td>
            <td>25</td>
            <td>79</td>
        </tr>
        <tr>
            <th scope="row">Kate</th>
            <td>40</td>
            <td>80</td>
            <td>90</td>
            <td>25</td>
            <td>15</td>
            <td>119</td>
        </tr>       
    </tbody>
</table>

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

eliza_ralves · #11 (**permalink**) 01/08/2011, 06:15

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.

emprear · #12 (**permalink**) 01/08/2011, 08:07

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

eliza_ralves · #13 (**permalink**) 01/08/2011, 12:09

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>