É realmente uma coisa complicada ter um cabeçalho pegajoso na sua mesa. Eu tinha o mesmo requisito, mas com asp: GridView e, em seguida, achei que ele realmente tinha cabeçalho pegajoso no gridview. Existem muitas soluções disponíveis e demorei 3 dias a tentar toda a solução, mas nenhuma delas conseguiu satisfazer.
O principal problema que enfrentei com a maioria dessas soluções foi o problema de alinhamento. Quando você tenta fazer o cabeçalho flutuar, de alguma forma o alinhamento das células do cabeçalho e do corpo fica fora do controle.
Com algumas soluções, também tive o problema de sobrepor o cabeçalho às primeiras linhas do corpo, o que faz com que as linhas do corpo fiquem ocultas atrás do cabeçalho flutuante.
Então agora eu tive que implementar minha própria lógica para conseguir isso, embora eu também não considere isso uma solução perfeita, mas isso também possa ser útil para alguém,
Abaixo está a tabela de amostra.
<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 : A tabela é agrupada em um DIV com o atributo de classe igual a 'table-holder'.
Abaixo está o script JQuery que eu adicionei no cabeçalho da 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>
e finalmente abaixo está a classe CSS para fins de coloração.
.table-holder
{
height:200px;
overflow:auto;
border-width:0px;
}
.customerTable thead
{
background: #4b6c9e;
color:White;
}
Portanto, toda a idéia dessa lógica é colocar a tabela em uma div do suporte da tabela e criar clone desse suporte no lado do cliente quando a página for carregada. Agora, oculte o corpo da tabela dentro do suporte do clone e posicione a parte restante do cabeçalho sobre o cabeçalho original.
A mesma solução também funciona para asp: gridview, você precisa adicionar mais duas etapas para conseguir isso no gridview,
No evento OnPrerender do objeto gridview em sua página da web, defina a seção da tabela da linha do cabeçalho igual a TableHeader.
if (this.HeaderRow != null)
{
this.HeaderRow.TableSection = TableRowSection.TableHeader;
}
E envolva sua grade <div class="table-holder"></div>.
Nota : se o cabeçalho tiver controles clicáveis, talvez seja necessário adicionar mais um script jQuery para passar os eventos gerados no cabeçalho clonado para o cabeçalho original. Esse código já está disponível no plugin jQuery sticky-header criado por jmosbech