Aumentar de tamaño fila y dejarlo permanente

xdunkelheitx · #1 (**permalink**) 26/04/2009, 15:41

Hola quisiera saber como al hacer clic en una fila aumentar su tamaño pero que se quede estatico al hacerle click. Espero me ayuden.

Código HTML:

<html>
<head>
<style>
#listado {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
text-decoration: none;
border: none 0px solid;
border-collapse: collapse;

}

#listado tr#cabecera {
background:#000000;
color: #FFFFFF;
text-align: center;
}



#listado tbody tr:hover {
background:#FFFF00;
cursor: default;
}

#listado tbody tr:active {height:400px;}

#listado tbody tr td {
padding: 5px;
}

</style>
</head>

<body>
<table id="listado">
<tr id="cabecera">
<td>hola1</td>
<td>hola2</td>
</tr>

<tbody>
</tbody>
</table>

</body>
</html>

Bam_Margera · #2 (**permalink**) 28/04/2009, 01:58

juraría que solo con CSS no es posible, pero si lo es, me gustaría saber como! jaja

jomaruro · #3 (**permalink**) 28/04/2009, 02:04

Hola:

Solo con CSS no se puede, tendrías que hacerlo con Javascript.

Saludos.

Mikmoro · #4 (**permalink**) 29/04/2009, 05:07

Cita:

<!doctype html public "-//w3c//dtd xhtml 1.0 strict//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es-es" lang="es-es">
<head>
<title></title>
<style>
#listado {
font-family: Verdana, arial, helvetica, sans-serif;
font-size: 12px;
text-decoration: None;
border: None 0px solid;
border-collapse: Collapse;
}
#listado tr#cabecera {
background:#000000;
color: #ffffff;
text-align: Center;
}
#listado tbody tr:hover {
background:#ffff00;
cursor: Default;
}
#listado td a {color: #ffffff;}
#listado td a:visited {display: Block; height:400px;line-height: 400px;outline: 0;}
#listado tbody tr td {
padding: 5px;
}
</style>
</head>
<body>
<table id="listado">
<tr id="cabecera">
<td><a href="#">hola1</a></td>
<td><a href="#">hola2</a></td>
</tr>
<tbody>
</tbody>
</table>
</body>
</html>

jomaruro · #5 (**permalink**) 29/04/2009, 07:02

Hola:

Cita:

Iniciado por jomaruro

Solo con CSS no se puede, tendrías que hacerlo con Javascript.

Y viene mikmoro y lo soluciona con CSS

Saludos.

Mikmoro · #6 (**permalink**) 29/04/2009, 07:59

No, según lo que quiera puede que esa sea una solución o no. Quizá no sirva de nada, todo depende de lo que se busca exactamente

xdunkelheitx · #7 (**permalink**) 02/05/2009, 13:29

al comienzo pense que ya estaba solucionado, pero al revisar y ver que el pseudo visited era el que aumenta el tamaño entonces se concluye que solo una vez funciona es decir si vuelvo a abrir la pagina va a estar con tamaña aumentado por mas que la recarge.

pero igual gracias Mikmoro por la ayuda

Mikmoro · #8 (**permalink**) 02/05/2009, 15:45

El asunto es: ¿quieres que esté abierto cuando es pulsado y se cierre si pulsas otra fila o en otra parte? Usa :focus y :active

Cita:

#listado td a:focus, #listado td a:active {display: Block; height:400px;line-height: 400px;outline: 0;}

Como te decía, no aclaras qué quieres hacer exactamente.