Ver Mensaje Individual
  #1 (permalink)  
Antiguo 31/07/2014, 11:33
PIRATADELPROFIT
 
Fecha de Ingreso: julio-2014
Mensajes: 4
Antigüedad: 9 años, 9 meses
Puntos: 0
Pregunta Respuesta: Tabla dinamica con headers fijos y scroll

Epale, como le va ?

Este codigo lo he escrito a punta d auto ayuda y viendo otros codigo y logre esto:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="shortcut icon" href="../imagenes/icon.ico" />
<title>Aeropostal Alas de Venezuela</title>
<style type="text/css">

td {
font-size: 0.9em;
text-align: center;
color:blue;
}
mitabla.tbody tr:hover{
background:#9CD6F5
}
thead {
color:white;
background:#069;
position:static;
}

.prueba {
float:middle;
border:0;
clear: both;
width:100%;
height:60px;
padding: 0;
overflow:auto;
overflow-x: hidden;
position: static;
}



.exterior{
float:center;
border:0;
clear: both;
width:99%;
height:24px;
padding: 0;
overflow:hidden;
position: static;
}
.interior {
float:left;
border:0;
clear: both;
width:100.4%;
height:60px;
padding: 0;
overflow-x: hidden;
overflow-y:scroll;
position: static;
}
thead.fixedHeader th {
width:200px;
font-family:arial;
font-size:0.8em
}
html>body thead.fixedHeader th {
width: 250px;
font-family:arial;
font-size:0.8em
}
tbody.scrollContent td {
width:200px;
text-align:left;
font-family:arial;
font-size:0.7em
}
html>body tbody.scrollContent td {
width: 200px;
text-align: left;
font-family:arial;
font-size:0.7em
}
t2 trt:hover{
background:#9CD6F5
}
html>body tbody.scrollContent tr:hover{
background:#9CD6F5
}
</style>
</head>
<body id="body" style="display:all;">
<form name="inventa1" method="post">
</br>Detalles de los Volados (EJEMPLO 1)
<div class="exterior" >
<table id="t1" class="t1" style="height:100%;width:100%;" border="0" cellpadding="0" cellspacing="1">
<thead class="fixedHeader" style="color:white;background:#069;position:static ;">
<tr>
<th>Boleto</th>
<th>Millas</th>
<th>Fecha de Vuelo </th>
<th>Numero de Vuelo</th>
<th>Clase</th>
<th>Origen </th>
<th>Destino</th>
<th>Descripci&oacute;n </th>
</tr>
</thead>
</table>
</div>
<div class="interior" >
<table id="t2" class="t2" style="height:100%;width:100.2%;" border="0" cellpadding="2" cellspacing="0">
<tbody class="scrollContent">
<tr id="trt" class="trt">
<td>1520220694578 </td>
<td>500</td>
<td>24-04-2014 </td>
<td>0363 </td>
<td>Y </td>
<td>MUN </td>
<td>CCS </td>
<td style="text-align:left">Actualización de Cuenta </td>
</tr>
<tr class="trt">
<td>1520220715780 </td>
<td>500</td>
<td>03-05-2014 </td>
<td>0362 </td>
<td>Y </td>
<td>CCS </td>
<td>MUN </td>
<td style="text-align:left">Actualización de Cuenta </td>
</tr>
<tr class="trt">
<td>1522108284826 </td>
<td>500</td>
<td>06-03-2014 </td>
<td>0362 </td>
<td>Y </td>
<td>CCS </td>
<td>MUN </td>
<td style="text-align:left">Acreditado, por promocion 500 millas </td>
</tr>
<tr class="trt">
<td>4152216972226 </td>
<td>500</td>
<td>07-03-2014 </td>
<td>0362 </td>
<td>Y </td>
<td>CCS </td>
<td>MUN </td>
<td style="text-align:left">Acreditado, por promocion 500 millas </td>
</tr>
<tr class="trt">
<td>1521265496326 </td>
<td>1500</td>
<td>06-03-2014 </td>
<td>0362 </td>
<td>Y </td>
<td>CCS </td>
<td>MUN </td>
<td style="text-align:left">Acreditado, por promocion 500 millas </td>
</tr>
<tr class="trt">
<td>7451625496328 </td>
<td>1500</td>
<td>21-07-2014 </td>
<td>036 </td>
<td>Y </td>
<td>MUN </td>
<td>CCS </td>
<td style="text-align:left">Pruebas de tablas</td>
</tr>
</tbody>
</table>
</div>
</br>
<br>
<br>
</br>Detalles de los Volados (EJEMPLO 2)
<div id="prueba" class="prueba" >
<table id="mitabla" class="mitabla" style="height:100%;width:100%;" border="0" cellpadding="2" cellspacing="0">
<thead style="color:white;background:#069;position:static ;">
<tr>
<th>Boleto</th>
<th>Millas</th>
<th>Fecha de Vuelo </th>
<th>Numero de Vuelo</th>
<th>Clase</th>
<th>Origen </th>
<th>Destino</th>
<th>Descripci&oacute;n </th>
</tr>
</thead>
<tbody>
<tr class="trt">
<td>1520220694578 </td>
<td>500</td>
<td>24-04-2014 </td>
<td>0363 </td>
<td>Y </td>
<td>MUN </td>
<td>CCS </td>
<td style="text-align:left">Actualización de Cuenta </td>
</tr>
<tr class="trt">
<td>1520220715780 </td>
<td>500</td>
<td>03-05-2014 </td>
<td>0362 </td>
<td>Y </td>
<td>CCS </td>
<td>MUN </td>
<td style="text-align:left">Actualización de Cuenta </td>
</tr>
<tr class="trt">
<td>1522108284826 </td>
<td>500</td>
<td>06-03-2014 </td>
<td>0362 </td>
<td>Y </td>
<td>CCS </td>
<td>MUN </td>
<td style="text-align:left">Acreditado, por promocion 500 millas </td>
</tr>
<tr class="trt">
<td>4152216972226 </td>
<td>500</td>
<td>07-03-2014 </td>
<td>0362 </td>
<td>Y </td>
<td>CCS </td>
<td>MUN </td>
<td style="text-align:left">Acreditado, por promocion 500 millas </td>
</tr>
<tr class="trt">
<td>1521265496326 </td>
<td>1500</td>
<td>06-03-2014 </td>
<td>0362 </td>
<td>Y </td>
<td>CCS </td>
<td>MUN </td>
<td style="text-align:left">Acreditado, por promocion 500 millas </td>
</tr>
<tr class="trt">
<td>7451625496328 </td>
<td>1500</td>
<td>21-07-2014 </td>
<td>036 </td>
<td>Y </td>
<td>MUN </td>
<td>CCS </td>
<td style="text-align:left">Pruebas de tablas</td>
</tr>
</tbody>
</table>
</div>
</form>
</body>
</html>

El problema q tengo q ante funcionaba el HOVER y en la modificaciones lo dañe para IE 6.8/7.0/8.0 en Firefox y Crome funciona al pelo, la idea es ponerlo a funcionar con consultas dinamicas en ASP puro

saludos

Última edición por PIRATADELPROFIT; 31/07/2014 a las 11:35 Razón: ortografia