Cabeçalhos de tabela HTML sempre visíveis na parte superior da janela ao visualizar uma tabela grande

Gostaria de poder "ajustar" a apresentação de uma tabela HTML para adicionar um único recurso: ao rolar a página para baixo para que a tabela fique na tela, mas as linhas do cabeçalho estejam fora da tela, gostaria que os cabeçalhos permanecessem visível na parte superior da área de visualização.

Isso seria conceitualmente semelhante ao recurso "congelar painéis" no Excel. No entanto, uma página HTML pode conter várias tabelas e eu gostaria que isso acontecesse para a tabela que está atualmente em exibição, apenas enquanto estiver em exibição.

Nota: Vi uma solução em que a área de dados da tabela é rolada enquanto os cabeçalhos não rolam. Essa não é a solução que estou procurando.

Confira jQuery.floatThead ( demos disponíveis ), que é muito legal, também pode trabalhar com DataTables e até trabalhar dentro de um overflow: autocontêiner.

Eu criei uma solução de prova de conceito usando jQuery .

Veja a amostra aqui.

Agora eu tenho esse código em um repositório de bitbucket Mercurial . O arquivo principal étables.html .

Estou ciente de um problema com isso: se a tabela contiver âncoras e se você abrir o URL com a âncora especificada em um navegador, quando a página carregar, a linha com a âncora provavelmente será obscurecida pelo cabeçalho flutuante.

Atualização 11-12-2017: Vejo que isso não funciona com o Firefox atual (57) e o Chrome (63). Não sabe quando e por que isso parou de funcionar ou como corrigi-lo. Mas agora, acho que a resposta aceita por Hendy Irawan é superior.

Craig, refinei um pouco o seu código (entre algumas outras coisas que ele agora está usando position: fixed) e o envolvi como um plugin do jQuery.

Experimente aqui: http://jsfiddle.net/jmosbech/stFcx/

E obtenha a fonte aqui: https://github.com/jmosbech/StickyTableHeaders

Se você estiver segmentando navegadores modernos compatíveis com css3 ( suporte ao navegador: https://caniuse.com/#feat=css-sticky ), poderá usarposition:sticky , o que não requer JS e não prejudica o layout da tabela. e td da mesma coluna. Também não requer largura fixa da coluna para funcionar corretamente.

Exemplo para uma única linha de cabeçalho:

thead th
{
    position: sticky;
    top: 0px;
}

Para segmentos com 1 ou 2 linhas, você pode usar algo como isto:

thead > :last-child th
{
    position: sticky;
    top: 30px; /* This is for all the the "th" elements in the second row, (in this casa is the last child element into the thead) */
}

thead > :first-child th
{
    position: sticky;
    top: 0px; /* This is for all the the "th" elements in the first child row */
}

Pode ser necessário jogar um pouco com o topo propriedade do último filho, alterando o número de pixels para corresponder à altura da primeira linha (+ a margem + a borda + o preenchimento, se houver), para que a segunda linha fique abaixo abaixo o primeiro.

Além disso, ambas as soluções funcionam mesmo se você tiver mais de uma tabela na mesma página: o th elemento de cada uma começa a ficar pegajoso quando sua posição superior é a indicada na definição de css e desaparece quando toda a tabela rola para baixo. Portanto, se houver mais tabelas, todas funcionam lindamente da mesma maneira.

Por que usar o último filho antes e o primeiro filho depois no css?

Como as regras css são renderizadas pelo navegador na mesma ordem em que você as escreve no arquivo css, por isso, se você tiver apenas 1 linha no elemento thead, a primeira linha também será a última linha e a regra do primeiro filho também precisará para substituir o último filho. Caso contrário, você terá um deslocamento da linha 30 px da margem superior, que suponho que não queira.

Um problema conhecido de posição: pegajoso é que ele não funciona nos elementos do cabeçalho ou nas linhas da tabela: você deve direcionar os elementos. Pular esse problema será resolvido em versões futuras do navegador.

Alternativas possíveis

js-floating-table-headers

js-floating-table-headers (Código do Google)

No Drupal

Eu tenho um site do Drupal 6. Eu estava na página "módulos" do administrador e percebi que as tabelas tinham esse recurso exato!

Olhando para o código, parece ser implementado por um arquivo chamado tableheader.js. Aplica o recurso em todas as tabelas da classe sticky-enabled.

Para um site Drupal, eu gostaria de poder usar esse tableheader.jsmódulo como está no conteúdo do usuário. tableheader.jsparece não estar presente nas páginas de conteúdo do usuário no Drupal. Publiquei uma mensagem no fórum para perguntar como modificar o tema do Drupal para que fique disponível. De acordo com uma resposta, tableheader.jspode ser adicionado a um tema Drupal usando drupal_add_js()no tema da template.phpseguinte maneira:

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

Encontrei esse problema muito recentemente. Infelizmente, eu tive que fazer 2 mesas, uma para o cabeçalho e outra para o corpo. Provavelmente não é a melhor abordagem de todos os tempos, mas aqui vai:

<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>

Isso funcionou para mim, provavelmente não é a maneira elegante, mas funciona. Vou investigar para ver se posso fazer algo melhor, mas isso permite várias tabelas.

Leia a propriedade do estouro para ver se ela se adapta às suas necessidades

É 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,

1. 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;
   }

2. 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

O uso display: fixedda theadseção deve funcionar, mas, para funcionar apenas na tabela atual em exibição, você precisará da ajuda do JavaScript. E será complicado, pois será necessário descobrir os locais de rolagem e a localização dos elementos em relação à janela de visualização, que é uma das principais áreas de incompatibilidade do navegador.

Dê uma olhada nas estruturas JavaScript populares (jQuery, MooTools, YUI, etc etc.) para ver se elas podem fazer o que você deseja ou torná-lo mais fácil.

Se você usa uma tabela em tela cheia, talvez esteja interessado em definir a opção para exibir: fixo; e superior: 0; ou tente uma abordagem muito semelhante via css.

Atualizar

Crie rapidamente uma solução funcional com iframes (html4.0). Este exemplo NÃO está em conformidade com o padrão, mas você poderá corrigi-lo facilmente:

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> 

A resposta mais simples usando apenas CSS: D !!!

table {
  /* Not required only for visualizing */
  border-collapse: collapse;
  width: 100%;
}

table thead tr th {
  /* you could also change td instead th depending your html code */
  background-color: green;
  position: sticky;
  z-index: 100;
  top: 0;
}

td {
  /* Not required only for visualizing */
  padding: 1em;
}

<table>
  <thead>
    <tr>
      <th>Col1</th>
      <th>Col2</th>
      <th>Col3</th>
    </tr>
  </thead>
  <tbody>
     <tr>
       <td>data</td>
       <td>data</td>
       <td>data</td>
     </tr>
     <tr>
       <td>data</td>
       <td>data</td>
       <td>data</td>
     </tr>
     <tr>
       <td>data</td>
       <td>data</td>
       <td>data</td>
     </tr>
     <tr>
       <td>data</td>
       <td>data</td>
       <td>data</td>
     </tr>
     <tr>
       <td>data</td>
       <td>data</td>
       <td>data</td>
     </tr>
     <tr>
       <td>data</td>
       <td>data</td>
       <td>data</td>
     </tr>
     <tr>
       <td>data</td>
       <td>data</td>
       <td>data</td>
     </tr>
     <tr>
       <td>data</td>
       <td>data</td>
       <td>data</td>
     </tr>
     <tr>
       <td>data</td>
       <td>data</td>
       <td>data</td>
     </tr>
     <tr>
       <td>data</td>
       <td>data</td>
       <td>data</td>
     </tr>
     <tr>
       <td>data</td>
       <td>data</td>
       <td>data</td>
     </tr>
     <tr>
       <td>data</td>
       <td>data</td>
       <td>data</td>
     </tr>
     <tr>
       <td>data</td>
       <td>data</td>
       <td>data</td>
     </tr>
     <tr>
       <td>data</td>
       <td>data</td>
       <td>data</td>
     </tr>
     <tr>
       <td>david</td>
       <td>castro</td>
       <td>rocks!</td>
     </tr>
  </tbody>
</table>

Essa prova de conceito que você criou foi ótima! No entanto, eu também encontrei este plugin jQuery, que parece estar funcionando muito bem. Espero que ajude!

É frustrante que o que funciona bem em um navegador não funcione em outros. O seguinte funciona no Firefox, mas não no Chrome ou 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>