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;
}
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>
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
Mode Lineal
