Foros del Web - Expandir un TR/TD

Foros del Web (http://www.forosdelweb.com/)

- CSS (http://www.forosdelweb.com/f53/)

- - Expandir un TR/TD (http://www.forosdelweb.com/f53/expandir-tr-td-518759/)

Expandir un TR/TD

Hola amigos, estuve investigando bastante, pero no encontre nada (seguramente es porque no se buscar bien del todo :P)

Les comento un poco que es lo que quiero hacer.

Tengo una tabla formateada integramente en CSS, este es el código CSS:

Código HTML:

body{

  font-family: Arial;

  padding: 5px;

}

h1{

  color: red;

}

h1 +p {

  margin-top: -20px;

  font-weight: bold;

}

#nav >li{

  font-family: "Trebuchet MS";

  color: #0000FF;

}

table{

  width: 80%;

}

table, th, td {

        border: 1px solid #D4E0EE;

        border-collapse: collapse;

        font-family: "Trebuchet MS", Arial, sans-serif;

        color: #555;

}

caption {

        font-size: 150%;

        font-weight: bold;

        margin: 5px;

}

td, th {

        padding: 4px;

}

.fecha{

   width: 60px;

}

.dni{

  width: 50px;

}

thead th {

        text-align: center;

        background: #E6EDF5;

        color: #4F76A3;

        font-size: 100% !important;

}

tbody th {

        font-weight: bold;

}
 

tbody tr {

  background: #FCFDFE;

}

tbody tr.odd { 

  background: #F7F9FC; 

}

table a:link {

        color: #718ABE;

        text-decoration: underline;

}

table a:visited {

        color: #718ABE;

        text-decoration: underline;

}

table a:hover {

        color: #ff5900;

        text-decoration: underline !important;

}

tfoot th, tfoot td {

        font-size: 85%;

}

tr:hover, tr.odd:hover{

  background:#E6EDF5;

}

Y este es el HTML:

Código HTML:

<body>
 <h1>Este es el titulo</h1>
 <p>Este es el copete</p>
 <p>Este es el cuerpo del texto</p>
 <ul id="nav">

  <li>lista 1</li>

  <li>lista 2</li>

    <ul>

      <li>Sub lista 1</li>

      <li>Sub lista 2</li>

    </ul>

  <li>lista 3</li>
 </ul>
 <table summary="Tabla de ejemplo">

        <caption>Tablas con CSS</caption>

        <thead>

                <tr>

                        <th>Datos %</th>

                        <th>Fecha</th>

                        <th>D.N.I.</th>

                        <th>Datos %</th>

                        <th>Datos %</th>

                </tr>

        </thead>

        <tbody>

                <tr>

                        <th>Dato 11</th>

                        <td class="fecha">05/06/07</td>

                        <td class="dni">24.353.185</td>

                        <td>Dato 14</td>

                        <td><a href="#">Dato 15</a></td>

                </tr>

                <tr class="odd">

                        <th>Dato 21</th>

                        <td class="fecha">05/06/06</td>

                        <td class="dni">24.353.185</td>

                        <td>Dato 24</td>

                        <td><a href="#">Dato 25</a></td>

                </tr>

                <tr>

                        <th>Dato 31</th>

                        <td class="fecha">05/06/05</td>

                        <td class="dni">24.353.185</td>

                        <td>Dato 34</td>

                        <td><a href="#">Dato 35</a></td>

                </tr>

                <tr class="odd">

                        <th>Dato 41</th>

                        <td class="fecha">05/06/04</td>

                        <td class="dni">24.353.185</td>

                        <td>Dato 44</td>

                        <td><a href="#">Dato 45</a></td>                        

                </tr>

        </tbody>
 </table>
 
 </body>

Como verán dentro de cada <tr></tr> existe un TD que tiene un dato con link (<td><a href="#">Dato 45</a></td>). Lo que quiero lograr es que al hacer click sobre este vinculo, el TR se agrande y me muestre una información, la cuál debería estar oculta. ¿me explico?

Seria algo así:

Dato | Dato1 | Dato 2 | link .... resumen de texto

Al hacer clik debería verse algo así:

Dato | Dato1 | Dato 2 | aca iría todo el texto que anteriormente se mostro como resumen.

Desde ya mil millón gracias!!!
DX

Re: Expandir un TR/TD

Y algo como esto te serviría?

Tooltips for Prototype

Porque el tema de tener un TR dinámico... no sé, puede ser...

Re: Expandir un TR/TD

sera un tooltip siguiendo la misma linea aqui encontre uno a puro css
http://www.tallerwebmaster.com/Tutor...n-CSS-c-6.html

edito: si parece que es tooltip por que arriba me ganaron X)

Re: Expandir un TR/TD

Jah! es cierto... no sé para que se me ocurrió Prototype si con CSS puro se puede solucionar.
Yo tenía guardado el enlace al sitio de Ask the CSS Guy (por demás recomendable)
este es el ejemplo
Que es exactamente lo mismo...

Re: Expandir un TR/TD

Mil gracias amigos, pero aparentemente me exprese muyyyyyyy mal!!!! :si:

lo que necesito es un "mas info" (por así decirlo) en cada TR y que al hacer click sobre este expanda el TR para abajo y muestre toda la información.

A ver si esta me salió bien :pensando:

Re: Expandir un TR/TD

mm tu dices algo como ocultar una capa y mostrarla al hacer click en leer mas..

como esto..
http://juglar103.blogsome.com/2006/1...tar-un-bloque/
o esto

http://www.forosdelweb.com/f13/mostr...0/#post2078117

Re: Expandir un TR/TD

Puesdes colocar la info extendida en una capa oculta, algo como

<div style="display: none;" id="masinfo">la info extendida</div>

y colocar en el enlace el código js que cambie la propiedad display algo como

<a href="#" onclick="document.masinfo.style.display=block;">ab rir capa</a>

Si no quieres cargar el contenido extendido antes de que se haga click, puedes hacer lo mismo pero cargan vía ajax el contenido en el momento de hacer click.

a ver si te sirve.

Re: Expandir un TR/TD

Mil gracias a todos!!!!! todo me sirvió, el tooltip lo voy a usar seguramente, y la expansión era la que buscaba......

de nuevo mil gracias a todos!!! :arriba: