Tabla invisible

[emprear]

@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:

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

<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