Skip to main content
adicionou 7 caracteres ao conteúdo
Fonte Link
Kevin.F
  • 1,4mil
  • 19
  • 48
    <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>
                    <tr>//foreach
                    <tr>    <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                </tbody>
                <thead>
                    <tr>
                        <th></th>
                        <th><<td></th>td>
                        <th><<td></th>td>
                        <th><</th>tr>
                        <th></th>
                        <th></th>
                   end </tr>foreach
                </thead>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>
    <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>
                    <tr>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                </tbody>
                <thead>
                    <tr>
                        <th></th>
                        <th></th>
                        <th></th>
                        <th></th>
                        <th></th>
                        <th></th>
                    </tr>
                </thead>
                <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>
    <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>
Fonte Link
Kevin.F
  • 1,4mil
  • 19
  • 48

Fixar thead ao rolar a tabela

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>
                    <tr>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                </tbody>
                <thead>
                    <tr>
                        <th></th>
                        <th></th>
                        <th></th>
                        <th></th>
                        <th></th>
                        <th></th>
                    </tr>
                </thead>
                <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;
}