Esto es realmente complicado tener un encabezado adhesivo en su mesa. Tenía el mismo requisito pero con asp: GridView y luego me pareció que realmente tenía un encabezado adhesivo en gridview. Hay muchas soluciones disponibles y me llevó 3 días probar todas las soluciones, pero ninguna de ellas pudo satisfacerlas.
El problema principal que enfrenté con la mayoría de estas soluciones fue el problema de alineación. Cuando intenta hacer que el encabezado flote, de alguna manera la alineación de las celdas del encabezado y las celdas del cuerpo se desvían.
Con algunas soluciones, también tuve el problema de superponer el encabezado en las primeras filas del cuerpo, lo que hace que las filas del cuerpo se oculten detrás del encabezado flotante.
Así que ahora tenía que implementar mi propia lógica para lograr esto, aunque tampoco lo considero 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 un atributo de clase igual a 'titular de la 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, por último, a continuación se muestra la clase CSS para propósitos de coloración
.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 de soporte de tabla y crear un clon de ese titular en el lado del cliente cuando se carga la página. Ahora oculte el cuerpo de la tabla dentro del soporte de clon y coloque la parte restante del encabezado sobre el encabezado original.
La misma solución también funciona para asp: gridview, debe agregar dos pasos más para lograr esto en gridview,
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;
}
Y envuelve tu cuadrícula <div class="table-holder"></div>.
Nota : si su encabezado tiene controles en los que se puede hacer clic, es posible que deba agregar más script jQuery para pasar los eventos generados en el encabezado clonado al encabezado original. Este código ya está disponible en el complemento jQuery sticky-header creado por jmosbech