Respuesta: Tabla dinamica con headers fijos y scroll

PIRATADELPROFIT · #1 (**permalink**) 31/07/2014, 11:33

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ó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ó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

pzin · #2 (**permalink**) 31/07/2014, 13:06

Bienvenido al foro.

Por favor no publiques mensajes en un mismo tema si es una duda nueva y, explica cual es el problema que tienes, así de paso le ponemos un título en condiciones al tema.

Intenta usar también la opción highlight cuando publiques código.