inmovilizar - Encabezados de tabla HTML siempre visibles en la parte superior de la ventana cuando se ve una tabla grande

tablas en html ejemplos

Question

Me gustaría poder "retocar" la presentación de una tabla HTML para agregar una sola característica: al desplazarme hacia abajo por la página para que la tabla esté en la pantalla pero las filas del encabezado estén fuera de la pantalla, me gustaría que los encabezados permanezcan. visible en la parte superior del área de visualización.

Esto sería conceptualmente como la función "congelar paneles" en Excel. Sin embargo, una página HTML puede contener varias tablas y solo me gustaría que suceda para la tabla que está actualmente a la vista, solo mientras está a la vista.

Nota: He visto una solución donde el área de datos de la tabla se hace desplazable mientras que los encabezados no se desplazan. Esa no es la solución que estoy buscando.

Answer 1

¡Esa prueba de concepto que hiciste fue genial! Sin embargo, también encontré este plugin jQuery que parece funcionar muy bien. ¡Espero eso ayude!

Answer 2

Craig, he refinado un poco tu código (entre otras cosas, ahora está usando position: fixed) y lo envolví como un plugin de jQuery.

Pruébelo aquí: http://jsfiddle.net/jmosbech/stFcx/

Y obtenga la fuente aquí: https://github.com/jmosbech/StickyTableHeaders

Answer 3

Es frustrante que lo que funciona bien en un navegador no funcione en otros. Lo siguiente funciona en Firefox, pero no en Chrome o IE:

<table width="80%">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</thead>
<tbody style="height:50px; overflow:auto">
<tr>
<td>Cell A1</td>
<td>Cell B1</td>
<td>Cell C1</td>
</tr>
<tr>
<td>Cell A2</td>
<td>Cell B2</td>
<td>Cell C2</td>
</tr>
<tr>
<td>Cell A3</td>
<td>Cell B3</td>
<td>Cell C3</td>
</tr>
</tbody>
</table>

Answer 4

Esto es realmente algo complicado tener un encabezado fijo en su mesa. Tenía el mismo requisito pero con asp: GridView y luego me pareció realmente tener un encabezado fijo en gridview. Hay muchas soluciones disponibles y tardé 3 días en probar toda la solución, pero ninguna de ellas satisfizo.

El problema principal que enfrenté con la mayoría de estas soluciones fue el problema de alineación. Cuando intenta hacer que el encabezado sea flotante, de alguna manera la alineación de las celdas de encabezado y las células del cuerpo se desvía.

Con algunas soluciones, también tuve problemas para hacer que el encabezado se superpusiera a las primeras filas del cuerpo, lo que provoca que las filas del cuerpo se oculten detrás del encabezado flotante.

Así que ahora tuve que implementar mi propia lógica para lograr esto, aunque tampoco considero que sea una solución perfecta, pero esto también podría ser útil para alguien.

A continuación se muestra la tabla de muestra.

<div class="table-holder">
<table id="MyTable" cellpadding="4" cellspacing="0" border="1px" class="customerTable">
<thead>
<tr><th>ID</th><th>First Name</th><th>Last Name</th><th>DOB</th><th>Place</th></tr>
</thead>
<tbody>
<tr><td>1</td><td>Customer1</td><td>LastName</td><td>1-1-1</td><td>SUN</td></tr>
<tr><td>2</td><td>Customer2</td><td>LastName</td><td>2-2-2</td><td>Earth</td></tr>
<tr><td>3</td><td>Customer3</td><td>LastName</td><td>3-3-3</td><td>Mars</td></tr>
<tr><td>4</td><td>Customer4</td><td>LastName</td><td>4-4-4</td><td>Venus</td></tr>
<tr><td>5</td><td>Customer5</td><td>LastName</td><td>5-5-5</td><td>Saturn</td></tr>
<tr><td>6</td><td>Customer6</td><td>LastName</td><td>6-6-6</td><td>Jupitor</td></tr>
<tr><td>7</td><td>Customer7</td><td>LastName</td><td>7-7-7</td><td>Mercury</td></tr>
<tr><td>8</td><td>Customer8</td><td>LastName</td><td>8-8-8</td><td>Moon</td></tr>
<tr><td>9</td><td>Customer9</td><td>LastName</td><td>9-9-9</td><td>Uranus</td></tr>
<tr><td>10</td><td>Customer10</td><td>LastName</td><td>10-10-10</td><td>Neptune</td></tr>
</tbody>
</table>
</div>

Nota : La tabla está envuelta en un DIV con atributo de clase igual a ''titular de tabla''.

A continuación se muestra el script JQuery que agregué en el encabezado de mi página html.

<script src="../Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="../Scripts/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
//create var for table holder
var originalTableHolder = $(".table-holder");
// set the table holder''s with
originalTableHolder.width($(''table'', originalTableHolder).width() + 17);
// Create a clone of table holder DIV
var clonedtableHolder = originalTableHolder.clone();
// Calculate height of all header rows.
var headerHeight = 0;
$(''thead'', originalTableHolder).each(function (index, element) {
headerHeight = headerHeight + $(element).height();
});
// Set the position of cloned table so that cloned table overlapped the original
clonedtableHolder.css(''position'', ''relative'');
clonedtableHolder.css(''top'', headerHeight + ''px'');
// Set the height of cloned header equal to header height only so that body is not visible of cloned header
clonedtableHolder.height(headerHeight);
clonedtableHolder.css(''overflow'', ''hidden'');
// reset the ID attribute of each element in cloned table
$(''*'', clonedtableHolder).each(function (index, element) {
if ($(element).attr(''id'')) {
$(element).attr(''id'', $(element).attr(''id'') + ''_Cloned'');
}
});
originalTableHolder.css(''border-bottom'', ''1px solid #aaa'');
// Place the cloned table holder before original one
originalTableHolder.before(clonedtableHolder);
});
</script>

y al final debajo está la clase de CSS para un poco de propósito colorante.

.table-holder
{
height:200px;
overflow:auto;
border-width:0px;
}
.customerTable thead
{
background: #4b6c9e;
color:White;
}

Entonces, la idea de esta lógica es colocar la tabla en un div titular de tabla y crear clon de ese titular en el lado del cliente cuando se carga la página. Ahora esconda el cuerpo de la tabla dentro del soporte clonado y coloque la parte restante del encabezado sobre el encabezado original.

La misma solución también funciona para asp: gridview, necesita agregar dos pasos más para lograr esto en gridview,

1. En el evento OnPrerender del objeto gridview en su página web, configure la sección de la tabla de la fila del encabezado igual a TableHeader.

   if (this.HeaderRow != null)
   {
   this.HeaderRow.TableSection = TableRowSection.TableHeader;
   }

2. Y envuelva su cuadrícula en <div class="table-holder"></div> .

Nota : si su encabezado tiene controles seleccionables, es posible que deba agregar más guiones jQuery para pasar los eventos generados en el encabezado clonado al encabezado original. Este código ya está disponible en jQuery sticky-header plugin create by http://jsfiddle.net/jmosbech/stFcx/

Answer 5

He hecho una solución de prueba de concepto usando jQuery .

Ver muestra aquí.

Ahora tengo este código en un repositorio bitbucket de Mercurial . El archivo principal es tables.html .

Soy consciente de un problema con esto: si la tabla contiene anclajes, y si abre la URL con el anclaje especificado en un navegador, cuando la página se carga, la fila con el anclaje probablemente quede oscurecida por el encabezado flotante.

Actualización 12-12-2011: veo que esto no funciona con Firefox (57) y Chrome (63) actuales. No estoy seguro de cuándo y por qué esto dejó de funcionar, o cómo solucionarlo. Pero ahora, creo que la respuesta aceptada por Hendy Irawan es superior.

Answer 6

Me he encontrado con este problema recientemente. Desafortunadamente, tuve que hacer 2 tablas, una para el encabezado y otra para el cuerpo. Probablemente no sea el mejor enfoque, pero aquí va:

<html>
<head>
<title>oh hai</title>
</head>
<body>
<table id="tableHeader">
<tr>
<th style="width:100px; background-color:#CCCCCC">col header</th>
<th style="width:100px; background-color:#CCCCCC">col header</th>
</tr>
</table>
<div style="height:50px; overflow:auto; width:250px">
<table>
<tr>
<td style="height:50px; width:100px; background-color:#DDDDDD">data1</td>
<td style="height:50px; width:100px; background-color:#DDDDDD">data1</td>
</tr>
<tr>
<td style="height:50px; width:100px; background-color:#DDDDDD">data2</td>
<td style="height:50px; width:100px; background-color:#DDDDDD">data2</td>
</tr>
</table>
</div>
</body>
</html>

Esto funcionó para mí, probablemente no sea elegante, pero funciona. Investigaré para ver si puedo hacer algo mejor, pero permite varias tablas.

Lea sobre la corrección de overflow para ver si se ajusta a su necesidad

Answer 7

Si usa una tabla de pantalla completa, quizás esté interesado en configurar th para visualizar: fixed; y arriba: 0; o pruebe un enfoque muy similar a través de css.

Actualizar

Simplemente construya rápidamente una solución de trabajo con iframes (html4.0). Este ejemplo NO ES de conformidad estándar, sin embargo, será capaz de solucionarlo fácilmente:

outer.html

<?xml version=''1.0'' encoding=''UTF-8''?>
<!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="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Outer</title>
<body>
<iframe src="test.html" width="200" height="100"></iframe>
</body>
</html>

test.html

<?xml version=''1.0'' encoding=''UTF-8''?>
<!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="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Floating</title>
<style type="text/css">
.content{
position:relative;
}
thead{
background-color:red;
position:fixed;
top:0;
}
</style>
<body>
<div class="content">
<table>
<thead>
<tr class="top"><td>Title</td></tr>
</head>
<tbody>
<tr><td>a</td></tr>
<tr><td>b</td></tr>
<tr><td>c</td></tr>
<tr><td>d</td></tr>
<tr><td>e</td></tr>
<tr><td>e</td></tr>
<tr><td>e</td></tr>
<tr><td>e</td></tr>
<tr><td>e</td></tr>
<tr><td>e</td></tr>
</tbody>
</table>
</div>
</body>
</html>

Answer 8

Usar la display: fixed en la sección de thead debería funcionar, pero para que solo funcione en la tabla actual a la vista, necesitará la ayuda de JavaScript. Y será complicado porque necesitará descubrir lugares de desplazamiento y ubicación de los elementos relativos a la ventana gráfica, que es una de las principales áreas de incompatibilidad del navegador.

Echa un vistazo a los populares frameworks de JavaScript (jQuery, MooTools, YUI, etc.) para ver si pueden hacer lo que quieres o hacer más fácil lo que deseas.

Answer 9

Posibles alternativas

js-floating-table-headers

js-floating-table-headers (código de Google)

En Drupal

Tengo un sitio de Drupal 6. Estaba en la página de "módulos" de administrador y noté que las tablas tenían esta característica exacta.

Al mirar el código, parece ser implementado por un archivo llamado tableheader.js . Aplica la función en todas las tablas con la clase sticky-enabled funciones sticky-enabled .

Para un sitio de Drupal, me gustaría poder hacer uso del módulo tableheader.js tal como está para el contenido del usuario. tableheader.js no parece estar presente en las páginas de contenido del usuario en Drupal. Publiqué un mensaje en el foro para preguntar cómo modificar el tema de Drupal para que esté disponible. Según una respuesta, tableheader.js se puede agregar a un tema de Drupal usando drupal_add_js() en template.php del tema de la siguiente manera:

drupal_add_js(''misc/tableheader.js'', ''core'');

Answer 10

Consulte jQuery.floatThead ( demostraciones disponibles ), que es muy bueno, también puede funcionar con DataTables e incluso puede funcionar dentro de un overflow: auto contenedor overflow: auto .