Congelar la primera fila de una tabla html
willy
-
bixente2 Mensajes publicados 3 Estado Miembro -
bixente2 Mensajes publicados 3 Estado Miembro -
¡Hola chicos!
Quiero mostrar mis páginas web en una tabla. El problema es que cuando la tabla es demasiado grande, provoca un desplazamiento vertical. Mi problema es que si llego al final de la tabla, pierdo el encabezado. ¿Es posible fijar una o algunas filas de la tabla? (el encabezado)
P.D.: el sitio está construido www.wassi.ci/ y no me gusta la idea de usar frames en lugar de la tabla por razones técnicas.
Quiero mostrar mis páginas web en una tabla. El problema es que cuando la tabla es demasiado grande, provoca un desplazamiento vertical. Mi problema es que si llego al final de la tabla, pierdo el encabezado. ¿Es posible fijar una o algunas filas de la tabla? (el encabezado)
P.D.: el sitio está construido www.wassi.ci/ y no me gusta la idea de usar frames en lugar de la tabla por razones técnicas.
7 respuestas
-
Si quieres hacerlo en puro HTML y CSS, lo hice hace poco si quieres ==> operativo en Mozilla e IE el complicado.
También hay un script para colorear una línea sí y otra no para facilitar la identificación...
¡Eso es, besitos! -
He hecho algo que debería poder ayudarte, pero no es necesariamente la mejor solución (aunque es la única que he encontrado)
- Haces una tabla para el encabezado de tu tabla especificando el ancho de las columnas (es importante)
- Haces otra tabla (con el mismo ancho de columna) que englobas en un div con el siguiente estilo:
.divForLook
{
overflow: scroll;
width:100%;
height:400;
}
Así tienes una tabla que siempre tiene el mismo tamaño en la que haces desplazarse el contenido (gracias al div)
Hasta luego -
Hola Bill17
Efectivamente me equivoqué, minfle. Para que funcione, es necesario especificar el <tbody> en "block" en el estilo CSS. No te olvides tampoco de especificarle la altura como había indicado.
Es importante ajustar las dimensiones de tus <thead> y <tbody> para que las columnas se alineen bien, y otros estilos CSS para el diseño.
Así queda:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <style> .ta_classe { overflow: auto; display: block; height: 100px; width: 500px; } .cl2 { height: 20px; width: 500px; display: block; } td { width: 100px; } </style> </HEAD> <BODY> <table> <thead class="cl2"> <tr><td>ent 1</td> <td>ent 2</td> <td>ent 3</td> <td>ent 4</td> <td>ent 5</td></tr> </thead> <tbody class="ta_classe"> <tr> <td>body 1</td> <td>body 2</td> <td>body 3</td> <td>body 4</td> <td>body 5</td> </tr> <tr> <td>body 1</td> <td>body 2</td> <td>body 3</td> <td>body 4</td> <td>body 5</td> </tr> <tr> <td>body 1</td> <td>body 2</td> <td>body 3</td> <td>body 4</td> <td>body 5</td> </tr> ...repetir 200 veces <tr> <td>body 1</td> <td>body 2</td> <td>body 3</td> <td>body 4</td> <td>body 5</td> </tr> <tr> <td>body 1</td> <td>body 2</td> <td>body 3</td> <td>body 4</td> <td>body 5</td> </tr> </tbody> </table> </BODY> </HTML> -
Hola a todos,
Sé que llego unos años tarde a la batalla, pero puede servir para aquellos que, como yo, también buscan una solución (10/03/2011).
Fijar los encabezados de columna y hacer que el cuerpo de la tabla se desplace es un juego de niños, en html/css puro:
1/ Encerrar los encabezados de columna en <thead></thead>
2/ Encerrar el resto de la tabla en <tbody></tbody>
Asignar una clase CSS a <tbody> :
.ta_clase
{
height: 300px;
overflow: auto;
}
Y ya está, no puede ser más sencillo :)
¡Hasta luego! -
Hola, Bixente
He intentado lo que dices, pero no funciona en absoluto. Quizás falta algo en tu explicación. Aquí está mi pequeño fragmento de código.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML> <HEAD> <style> .ta_clase { overflow: auto; } </style> </HEAD>
<BODY>
<table>
<thead> <tr> <td>ent 1</td> <td>ent 2</td> <td>ent 3</td> <td>ent 4</td> <td>ent 5</td> </tr> </thead>
<tbody class="ta_clase">
<tr> <td>body 1</td> <td>body 2</td> <td>body 3</td> <td>body 4</td> <td>body 5</td> </tr>
<tr> <td>body 1</td> <td>body 2</td> <td>body 3</td> <td>body 4</td> <td>body 5</td> </tr>
...repetir 200 veces
<tr> <td>body 1</td> <td>body 2</td> <td>body 3</td> <td>body 4</td> <td>body 5</td> </tr>
</tbody>
</table>
</BODY>
</HTML> -
Hola,
soy nuevo en la conversación. Bueno, ¿puedo saber dónde puedo encontrar cursos de Excel?-
Hola nuevo y bienvenido,
Para hacerlo bien, debes evitar hacer tus preguntas en cualquier lugar.
Utiliza mejor un nuevo mensaje en el foro adecuado.
Gracias.
--
-
-
Hola,
Intenta corregir primero los errores de tu página.
Por ejemplo :<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>GROUPE WASSI - </title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <meta name="keywords" content="Technologías, Consultoría Web, Microinformática, Kendrydh, Mantenimiento y red, Desarrollo Web, Formación, Costa de Marfil, Omaurier, Consejos e Ingeniería"> <script src="http://www.google-analytics.com/urchin.js" type="text/javascript"> </script> <!--Realizado por RZA : Rozel Audric KOUADIO : http://www.divinetwork.com--> <link href="css/omi_style.css" rel="stylesheet" type="text/css"> </head> <body topmargin="0" bottommargin="0"> del código del código del código del código del código del código del código del código <td height="18" valign="top"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Documento sin nombre</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <link href="css/omi_style.css" rel="stylesheet" type="text/css"> <!--Realizado por RZA : Rozel Audric KOUADIO : http://www.divinetwork.com--> </head> <body>
Después, ¿de qué tabla hablas?
Hay 16.
--
