1

Possuo a table abaixo gostaria de fazer um scroll nela e fixar a thead ao rolar para baixo.

inserir a descrição da imagem aqui

Código HTML até agora:

    <div class="row">
        <div class="TableCSS">
            <table>
                <thead>
                    <tr>
                        <th>Cnpj</th>
                        <th>Cliente</th>
                        <th>QtDiasUltMovimento</th>
                        <th>Titulos vencidos não pagos</th>
                        <th>Valor do Frete do Mes Anterior</th>
                        <th>Valor do Frete do Mes Atual</th>
                    </tr>
                </thead>
                <tbody>
                    //foreach
                    <tr>                            
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                    //end foreach
                </tbody>
                <tbody>
                     <tr>
                        <td><b>Total:</b></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td><b></b></td>
                        <td><b></b></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

Código CSS:

.TableCSS table {
    font-size:12px; 
    color:#ffffff; 
    width:100%; 
    border-width: 1px; 
    border-color: #a9a9a9;
    border-collapse: collapse;  
    zoom: 100%; 
    text-align:left;
}
.TableCSS th {
    white-space: nowrap!important;
    font-size:12px;
    background-color:#ffffff;
    border-width: 1px;
    padding: 3px;
    border-style: solid;
    border-color: #a9a9a9; 
    text-align:left; 
    padding-bottom: 0px; 
    padding-top: 0px; 
    font-style: italic;

}
.TableCSS tr {
    background-color:#ffffff; 
    padding-bottom: 0px; 
    padding-top: 0px; 
    text-align:center;
}
.TableCSS td {
    font-size: 12px;
    border-width: 1px;
    padding: 3px;
    border-style: solid;
    border-color: #a9a9a9;
    text-align:left;
    background-color: #ffffff;
    padding-bottom: 0px;
    padding-top: 0px; 
    color: black;
}
5
  • 3
    Possível duplicata de Fixar primeira linha tabela
    – hugocsl
    Commented 23/01/2018 às 14:09
  • As duas theads?
    – Sam
    Commented 23/01/2018 às 14:30
  • Uma somente, mas se tiver como fixar a de baixo na parte inferior também.
    – Kevin.F
    Commented 23/01/2018 às 14:39
  • E por quê exatamente existem duas thead na tabela?
    – Woss
    Commented 23/01/2018 às 14:48
  • Erro meu, editei a pergunta vê se da para entender melhor.
    – Kevin.F
    Commented 23/01/2018 às 15:09

1 Resposta 1

1

Você pode usar jQuery para fazer a linha do thead acompanhar o scroll da janela alterando o top de forma dinâmica. É necessário que o elemento tenha position: relative, por isso coloquei no CSS:

*{
    position: relative;
}

Se você usa algum framework que já seta position: relative aos elementos, não precisar colocar o CSS acima.

Veja o exemplo:

$(window).on("scroll load", function(){
   
   var tabela_top = $(".TableCSS table").offset().top;
   var window_top = $(this).scrollTop();

   $(".TableCSS table thead th").css({
      'top': tabela_top-window_top <= 0 ? window_top-tabela_top+'px' : '0',
      'z-index':'9',
      'padding':'10px 0'
   });
});
*{
   position: relative;
}
      .TableCSS table {
    font-size:12px; 
    color:#000; 
    width:100%; 
    border-width: 1px; 
    border-color: #a9a9a9;
    border-collapse: collapse;  
    zoom: 100%; 
    text-align:left;
}
.TableCSS th {
    white-space: nowrap!important;
    font-size:12px;
    background-color:#ffffff;
    border-width: 1px;
    padding: 3px;
    border-style: solid;
    border-color: #a9a9a9; 
    text-align:left; 
    padding-bottom: 0px; 
    padding-top: 0px; 
    font-style: italic;

}
.TableCSS tr {
    background-color:#ffffff; 
    padding-bottom: 0px; 
    padding-top: 0px; 
    text-align:center;
}
.TableCSS td {
    font-size: 12px;
    border-width: 1px;
    padding: 3px;
    border-style: solid;
    border-color: #a9a9a9;
    text-align:left;
    background-color: #ffffff;
    padding-bottom: 0px;
    padding-top: 0px; 
    color: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <h3>Tabela</h3>
  <div class="TableCSS">
      <table>
          <thead>
              <tr>
                  <th>Cnpj</th>
                  <th>Cliente</th>
                  <th>QtDiasUltMovimento</th>
                  <th>Titulos vencidos não pagos</th>
                  <th>Valor do Frete do Mes Anterior</th>
                  <th>Valor do Frete do Mes Atual</th>
              </tr>
          </thead>
          <tbody>
              <tr>
                  <td>a</td>
                  <td>1</td>
                  <td>1</td>
                  <td>1</td>
                  <td>1</td>
                  <td>1</td>
              </tr>
              <tr>
                  <td>1</td>
                  <td>1</td>
                  <td>1</td>
                  <td>1</td>
                  <td>1</td>
                  <td>1</td>
              </tr>
              <tr>
                  <td>1</td>
                  <td>1</td>
                  <td>1</td>
                  <td>1</td>
                  <td>1</td>
                  <td>1</td>
              </tr>
              <tr>
                  <td>1</td>
                  <td>1</td>
                  <td>1</td>
                  <td>1</td>
                  <td>1</td>
                  <td>1</td>
              </tr>
              <tr>
                  <td>1</td>
                  <td>1</td>
                  <td>1</td>
                  <td>1</td>
                  <td>1</td>
                  <td>1</td>
              </tr>
              <tr>
                  <td>1</td>
                  <td>1</td>
                  <td>1</td>
                  <td>1</td>
                  <td>1</td>
                  <td>1</td>
              </tr>
              <tr>
                  <td>1</td>
                  <td>1</td>
                  <td>1</td>
                  <td>1</td>
                  <td>1</td>
                  <td>1</td>
              </tr>
              <tr>
                  <td>1</td>
                  <td>1</td>
                  <td>1</td>
                  <td>1</td>
                  <td>1</td>
                  <td>1</td>
              </tr>
              <tr>
                  <td>1</td>
                  <td>1</td>
                  <td>1</td>
                  <td>1</td>
                  <td>1</td>
                  <td>1</td>
              </tr>
              <tr>
                  <td>1</td>
                  <td>1</td>
                  <td>1</td>
                  <td>1</td>
                  <td>1</td>
                  <td>1</td>
              </tr>
              <tr>
                  <td>1</td>
                  <td>1</td>
                  <td>1</td>
                  <td>1</td>
                  <td>1</td>
                  <td>1</td>
              </tr>
              <tr>
                  <td>1</td>
                  <td>1</td>
                  <td>1</td>
                  <td>1</td>
                  <td>1</td>
                  <td>1</td>
              </tr>
              <tr>
                  <td>1</td>
                  <td>1</td>
                  <td>1</td>
                  <td>1</td>
                  <td>1</td>
                  <td>1</td>
              </tr>
              <tr>
                  <td>1</td>
                  <td>1</td>
                  <td>1</td>
                  <td>1</td>
                  <td>1</td>
                  <td>1</td>
              </tr>
              <tr>
                  <td>1</td>
                  <td>1</td>
                  <td>1</td>
                  <td>1</td>
                  <td>1</td>
                  <td>1</td>
              </tr>
              <tr>
                  <td>1</td>
                  <td>1</td>
                  <td>1</td>
                  <td>1</td>
                  <td>1</td>
                  <td>1</td>
              </tr>
              <tr>
                  <td>1</td>
                  <td>1</td>
                  <td>1</td>
                  <td>1</td>
                  <td>1</td>
                  <td>1</td>
              </tr>
              <tr>
                  <td>1</td>
                  <td>1</td>
                  <td>1</td>
                  <td>1</td>
                  <td>1</td>
                  <td>1</td>
              </tr>
              <tr>
                  <td>1</td>
                  <td>1</td>
                  <td>1</td>
                  <td>1</td>
                  <td>1</td>
                  <td>1</td>
              </tr>
              <tr>
                  <td>1</td>
                  <td>1</td>
                  <td>1</td>
                  <td>1</td>
                  <td>1</td>
                  <td>1</td>
              </tr>
              <tr>
                  <td>1</td>
                  <td>1</td>
                  <td>1</td>
                  <td>1</td>
                  <td>1</td>
                  <td>1</td>
              </tr>
          </tbody>
          <tbody>
              <tr>
                  <td><b>Total:</b></td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td><b></b></td>
                  <td><b></b></td>
              </tr>
          </tbody>
      </table>
  </div>
</div>

5
  • Ficou legal porém, não tem como deixar a theadcom mais heigth quando ela desce ? Pois ela não fica do mesmo tamanho quando está fixa la em cima.
    – Kevin.F
    Commented 24/01/2018 às 18:47
  • @Kevin.F Sim. Adicionei padding à thead de 10px 0. Assim ele fica mais alta. Atualizei na resposta.
    – Sam
    Commented 24/01/2018 às 18:54
  • Agora ta bom, outra dúvida vamos supor que eu tenho uma div com scroll, dentro desta div tem a table a página em si não rola somente a div, tem como eu deixar a thead no topo da div e não da pagina ?
    – Kevin.F
    Commented 25/01/2018 às 10:22
  • @Kevin.F Tem sim.
    – Sam
    Commented 25/01/2018 às 10:27
  • 1
    @Kevin.F Segue um exemplo no JSFiddle: jsfiddle.net/fLxd0fL7
    – Sam
    Commented 25/01/2018 às 11:38

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .