Fix thead while scrolling table

Asked

Viewed 2,081 times

1

I own the table below would like to make a scroll on it and pin to thead rolling down.

inserir a descrição da imagem aqui

HTML code so far:

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

CSS code:

.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;
}
html css
  • 3

    Possible duplicate of Fix first row table

  • The two theads?

  • Only one, but if you can fix the bottom one at the bottom too.

  • And why exactly are there two thead on the table?

  • My mistake, I edited the question see if you can understand better.

1 answer

1


You can use jQuery to make the line of thead follow the window scroll by changing the top dynamically. The element must have position: relative, so I put it in CSS:

*{
    position: relative;
}

If you use any framework that already arrow position: relative elements, no need to put the CSS above.

Take the example:

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

  • It became legal however, there is no way to leave the theadwith more heigth when it goes down ? For it does not get the same size when it is fixed on top.

  • @Kevin. F Yes. I added padding to thead 10px 0. So it gets taller. I updated the response.

  • Now ta good, another doubt let’s assume that I have a div with scroll, inside this div has the table the page itself does not only roll to div, has how I leave the thead at the top of div and not the page ?

  • @Kevin. F Has yes.

  • 1

    @Kevin. F Here is an example from Jsfiddle: https://jsfiddle.net/fLxd0fL7/

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.