Pin thead when scrolling the table

Question

Pin thead when scrolling the table

Navigation

#1 by (1 votes)

1

I have table below I would like to scroll it and set thead to scroll down.

HTMLcodesofar:

<divclass="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

asked by anonymous 23.01.2018 / 14:58

1 answer

Dictionarystring, string or NameValueCollection? Xamarin How to change the color of the Menu and Selected Item?

score 1 · Accepted Answer

You can use jQuery to make the thead line follow the window scroll by changing top dynamically. It is necessary that the element has position: relative , so I put it in the CSS:

*{
    position: relative;
}

If you use some framework that already has position: relative to elements, you do not need to put the above CSS.

See 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><divclass="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>