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