11-ene-2006, 15:24
|
#1 (permalink) |
 Fecha de Ingreso: noviembre-2002
Mensajes: 848
|
tabla con primera fila fija ?
tengo que mostrar datos en una tabla, pero los títulos (primera fila) quiero que permanezcan siempre visibles. De momento la solución que he encontrado es en la página principal poner una tabla con sólo los encabezados, y en un IFRAME justo debajo la tabla con los datos. El problema es que dependiendo del navegador se ajusta o descoloca, me gustaría saber si hay alguna forma mejor. Gracias.
__________________
Aprendiz en mucho, maestro en nada. Si por cada solución recibida aportas otra, ganamos todos. |
|
|
|
12-ene-2006, 04:48
|
#2 (permalink) |
|
Colaborador
Fecha de Ingreso: marzo-2004
Ubicación: En alguna otra parte
Mensajes: 4.393
|
Tabla con barras de desplazamiento
Hola
Bueno, creo que esto te puede ayudar. He usado dos tablas aunque el usuario no notaría dicho efecto y algunos detalles para que se note bien lo que he hecho, solo has de ajustar el código a tus necesidades.
Código:
Posiblemente hay alguna otra solución, pero mientras alguno de los maestros piensa en ella, aquí dejo esta.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="language" content="ES" />
<meta http-equiv="Content-Language" content="es" />
<meta name="Author" content="PatomaS" />
<title>Montar una tabla con barras de desplazamiento</title>
<style type="text/css">
* {
padding: 0px;
margin: 0px;
border: 0px;
}
.Base {
position: absolute;
top: 0px;
left: 0px;
width: 99%;
}
.CapaCabecera {
position: absolute;
top: 0px;
left: 0px;
width: 250px;
border: 1px solid #00ff00;
}
.TablaCabecera {
width: 100%;
}
.CapaContenido {
position: absolute;
top: 25px;
left: 0px;
width: 250px;
height: 100px;
overflow: auto;
border: 1px solid #000000;
}
td {
width: 100px;
text-align: center;
}
.TablaContenido {
width: 200px;
table-layout: fixed;
boder-collapse: collapse;
}
</style>
</head>
<body>
<div class="Base">
<div class="CapaCabecera">
<table class="TablaCabecera">
<col width="100px" /><col width="100px" />
<tr>
<th>Título 1</th><th>Título 2</th>
</tr>
</table>
</div>
<div class="CapaContenido">
<table class="TablaContenido">
<col width="100px" /><col width="100px" />
<tr>
<td>Texto</td><td>Texto</td>
</tr>
<tr>
<td>Texto</td><td>Texto</td>
</tr>
<tr>
<td>Texto</td><td>Texto</td>
</tr>
<tr>
<td>Texto</td><td>Texto</td>
</tr>
<tr>
<td>Texto</td><td>Texto</td>
</tr>
<tr>
<td>Texto</td><td>Texto</td>
</tr>
<tr>
<td>Texto</td><td>Texto</td>
</tr>
<tr>
<td>Texto</td><td>Texto</td>
</tr>
<tr>
<td>Texto</td><td>Texto</td>
</tr>
<tr>
<td>Texto</td><td>Texto</td>
</tr>
</table>
</div>
</div>
</body>
</html>
Felicidad
__________________
De vuelta por aquí, más o menos ¡ hey, hou, hou, hey ! |
|
|
|
|
12-ene-2006, 11:49
|
#5 (permalink) |
|
Fecha de Ingreso: noviembre-2002
Mensajes: 848
|
Gracias,
He estado probando pero según creo esto hace que las filas de THEAD y TFOOT aparezcan siempre, modicando sólo el contenido del TBODY, pero claro, el problema es que la tabla crece y se hacen necesarias las barras de desplazamiento del navegador. La solución de las capas supongo que sí irá bien para lo que busco, aunque como dice Patomas, quedamos a la espera de si alguien conoce una mejor
__________________
Aprendiz en mucho, maestro en nada. Si por cada solución recibida aportas otra, ganamos todos. |
|
|
|
|
12-ene-2006, 12:03
|
#6 (permalink) |
 Fecha de Ingreso: octubre-2005
Mensajes: 536
|
Hola de nuevo.
Cita:
No necesariamente.
Iniciado por MikiBroki
Gracias,
He estado probando pero según creo esto hace que las filas de THEAD y TFOOT aparezcan siempre, modicando sólo el contenido del TBODY,
Cita:
A lo mejor te interesa
Iniciado por MikiBroki
Gracias,
pero claro, el problema es que la tabla crece y se hacen necesarias las barras de desplazamiento del navegador. La solución de las capas supongo que sí irá bien para lo que busco, aunque como dice Patomas, quedamos a la espera de si alguien conoce una mejor |
|
|
|
|
16-ene-2006, 02:09
|
#7 (permalink) |
|
Fecha de Ingreso: noviembre-2002
Mensajes: 848
|
Muchas gracias Jorolo, las soluciones que daban no funcionaban en firefox+ie pero gracias a ellas he conseguido sacarlo, he puesto el código que funciona por si a alguien le sirve en el enlace que me has pasado
Gracias !
__________________
Aprendiz en mucho, maestro en nada. Si por cada solución recibida aportas otra, ganamos todos. |
|
|
|
|
23-ene-2006, 11:06
|
#8 (permalink) |
|
Fecha de Ingreso: noviembre-2002
Mensajes: 981
|
Hola todos :
sólo agregar algún enlace más barra de desplazamiento en tablas y layers Allí hay otros enlaces, y en uno de Wako está el detalle de los navegadores que aceptan la barra de desplazamiento en el tbody. saludos |
|
|
|
|
23-ene-2006, 11:53
|
#9 (permalink) |
 Fecha de Ingreso: junio-2005
Ubicación: Edo. Mex
Mensajes: 649
|
Lo puedes solucionar facilmente con css (overflow:auto)
Un ejemplo: <div style="overflow: hidden; height: 20px"> Los títulos (primera fila) </div> <div style="overflow:auto; width:450px; height:200px; align:left;"> Datos del resto de la tabla </div> Y listo¡ Los valores "auto" y "scroll" no funcionan en ninguna version de Netscape hasta la 4.5 y en algunas versiones de Explorer 4.0. Última edición por ricardomz; 23-ene-2006 a las 12:01. |
|
|
|
Mode Lineal
