Foros del Web » Creando para Internet » CSS »

Expandir un TR/TD

Estas en el tema de Expandir un TR/TD en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 12/09/2007, 14:55
Avatar de DragonX
Colaborador
 
Fecha de Ingreso: mayo-2002
Ubicación: Funkyland
Mensajes: 8.339
Antigüedad: 15 años, 6 meses
Puntos: 153
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
  #2 (permalink)  
Antiguo 12/09/2007, 16:06
Avatar de Daniel Ulczyk
Moderador
 
Fecha de Ingreso: febrero-2005
Ubicación: Buenos Aires
Mensajes: 9.175
Antigüedad: 12 años, 9 meses
Puntos: 2072
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...
__________________
—Somos lo que hacemos repetidamente. La excelencia, entonces, no es un acto sino un hábito. (Aristóteles dixit)
  #3 (permalink)  
Antiguo 12/09/2007, 16:11
Avatar de kaninox  
Fecha de Ingreso: septiembre-2005
Ubicación: In my House
Mensajes: 3.591
Antigüedad: 12 años, 2 meses
Puntos: 49
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)
__________________
Gokuh Salvo al mundo. PUNTO!!!!
  #4 (permalink)  
Antiguo 12/09/2007, 16:30
Avatar de Daniel Ulczyk
Moderador
 
Fecha de Ingreso: febrero-2005
Ubicación: Buenos Aires
Mensajes: 9.175
Antigüedad: 12 años, 9 meses
Puntos: 2072
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...
__________________
—Somos lo que hacemos repetidamente. La excelencia, entonces, no es un acto sino un hábito. (Aristóteles dixit)
  #5 (permalink)  
Antiguo 12/09/2007, 17:12
Avatar de DragonX
Colaborador
 
Fecha de Ingreso: mayo-2002
Ubicación: Funkyland
Mensajes: 8.339
Antigüedad: 15 años, 6 meses
Puntos: 153
Re: Expandir un TR/TD

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

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
  #6 (permalink)  
Antiguo 13/09/2007, 02:29
Avatar de kaninox  
Fecha de Ingreso: septiembre-2005
Ubicación: In my House
Mensajes: 3.591
Antigüedad: 12 años, 2 meses
Puntos: 49
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
__________________
Gokuh Salvo al mundo. PUNTO!!!!
  #7 (permalink)  
Antiguo 13/09/2007, 02:33
Avatar de illman  
Fecha de Ingreso: mayo-2001
Mensajes: 115
Antigüedad: 16 años, 7 meses
Puntos: 0
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.
  #8 (permalink)  
Antiguo 13/09/2007, 12:44
Avatar de kahlito
Colaborador
 
Fecha de Ingreso: marzo-2003
Ubicación: En el Estrecho y el mar
Mensajes: 2.893
Antigüedad: 14 años, 9 meses
Puntos: 60
Re: Expandir un TR/TD

También puedes hacerlo solo con css y sin javascript:

http://tutorials.alsacreations.com/affiche/

Ejemplos:

http://tutorials.alsacreations.com/affiche/affiche.htm
http://tutorials.alsacreations.com/a...roulantcss.htm
http://tutorials.alsacreations.com/affiche/image.htm

Saludos
  #9 (permalink)  
Antiguo 14/09/2007, 07:54
Avatar de DragonX
Colaborador
 
Fecha de Ingreso: mayo-2002
Ubicación: Funkyland
Mensajes: 8.339
Antigüedad: 15 años, 6 meses
Puntos: 153
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!!!
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 08:33.