1

Estava procurando uma forma de aplicar o scroll vertical e horizontal mantendo o cabeçalho fixo para minha tabela.

Encontrei nesse fiddle uma possível solução para este caso.

$('table').on('scroll', function () {
    $("table > *").width($("table").width() + $("table").scrollLeft());
});
html {
    font-family: verdana;
    font-size: 10pt;
    line-height: 25px;
}
table {
    border-collapse: collapse;
    width: 300px;
    overflow-x: scroll;
    display: block;
}
thead {
    background-color: #EFEFEF;
}
thead, tbody {
    display: block;
}
tbody {
    overflow-y: scroll;
    overflow-x: hidden;
    height: 140px;
}
td, th {
    min-width: 100px;
    height: 25px;
    border: dashed 1px lightblue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

<table>
    <thead>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
            <th>Column 4</th>
            <th>Column 5</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Row 1</td>
            <td>Row 1</td>
            <td>Row 1</td>
            <td>Row 1</td>
            <td>Row 1</td>
        </tr>
        <tr>
            <td>Row 2</td>
            <td>Row 2</td>
            <td>Row 2</td>
            <td>Row 2</td>
            <td>Row 2</td>
        </tr>
        <tr>
            <td>Row 3</td>
            <td>Row 3</td>
            <td>Row 3</td>
            <td>Row 3</td>
            <td>Row 3</td>
        </tr>
        <tr>
            <td>Row 4</td>
            <td>Row 4</td>
            <td>Row 4</td>
            <td>Row 4</td>
            <td>Row 4</td>
        </tr>
        <tr>
            <td>Row 5</td>
            <td>Row 5</td>
            <td>Row 5</td>
            <td>Row 5</td>
            <td>Row 5</td>
        </tr>
        <tr>
            <td>Row 6</td>
            <td>Row 6</td>
            <td>Row 6</td>
            <td>Row 6</td>
            <td>Row 6</td>
        </tr>
        <tr>
            <td>Row 7</td>
            <td>Row 7</td>
            <td>Row 7</td>
            <td>Row 7</td>
            <td>Row 7</td>
        </tr>
        <tr>
            <td>Row 8</td>
            <td>Row 8</td>
            <td>Row 8</td>
            <td>Row 8</td>
            <td>Row 8</td>
        </tr>
        <tr>
            <td>Row 9</td>
            <td>Row 9</td>
            <td>Row 9</td>
            <td>Row 9</td>
            <td>Row 9</td>
        </tr>
        <tr>
            <td>Row 10</td>
            <td>Row 10</td>
            <td>Row 10</td>
            <td>Row 10</td>
            <td>Row 10</td>
        </tr>
    </tbody>
</table>

Quando tento passar o trecho de código acima para meu arquivo.html ele não exibe corretamente o scroll horizontal.

Não entendo por que no fiddle funcionou e no meu arquivo não funciona.

3 Respostas 3

1

$('table').on('scroll', function () {
    $("table > *").width($("table").width() + $("table").scrollLeft());
});
html {
    font-family: verdana;
    font-size: 10pt;
    line-height: 25px;
}
table {
    border-collapse: collapse;
    width: 300px;
    overflow-x: scroll;
    display: block;
}
thead {
    background-color: #EFEFEF;
}
thead, tbody {
    display: block;
}
tbody {
    overflow-y: scroll;
    overflow-x: hidden;
    height: 140px;
}
td, th {
    min-width: 100px;
    height: 25px;
    border: dashed 1px lightblue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <thead>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
            <th>Column 4</th>
            <th>Column 5</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Row 1</td>
            <td>Row 1</td>
            <td>Row 1</td>
            <td>Row 1</td>
            <td>Row 1</td>
        </tr>
        <tr>
            <td>Row 2</td>
            <td>Row 2</td>
            <td>Row 2</td>
            <td>Row 2</td>
            <td>Row 2</td>
        </tr>
        <tr>
            <td>Row 3</td>
            <td>Row 3</td>
            <td>Row 3</td>
            <td>Row 3</td>
            <td>Row 3</td>
        </tr>
        <tr>
            <td>Row 4</td>
            <td>Row 4</td>
            <td>Row 4</td>
            <td>Row 4</td>
            <td>Row 4</td>
        </tr>
        <tr>
            <td>Row 5</td>
            <td>Row 5</td>
            <td>Row 5</td>
            <td>Row 5</td>
            <td>Row 5</td>
        </tr>
        <tr>
            <td>Row 6</td>
            <td>Row 6</td>
            <td>Row 6</td>
            <td>Row 6</td>
            <td>Row 6</td>
        </tr>
        <tr>
            <td>Row 7</td>
            <td>Row 7</td>
            <td>Row 7</td>
            <td>Row 7</td>
            <td>Row 7</td>
        </tr>
        <tr>
            <td>Row 8</td>
            <td>Row 8</td>
            <td>Row 8</td>
            <td>Row 8</td>
            <td>Row 8</td>
        </tr>
        <tr>
            <td>Row 9</td>
            <td>Row 9</td>
            <td>Row 9</td>
            <td>Row 9</td>
            <td>Row 9</td>
        </tr>
        <tr>
            <td>Row 10</td>
            <td>Row 10</td>
            <td>Row 10</td>
            <td>Row 10</td>
            <td>Row 10</td>
        </tr>
    </tbody>
</table>

Embora possa parecer que a ordem seja conforme mostrado acima dentro da sua pagina, clica em executar e dentro dessa area clica com o direito do mouse e selecione exibir código fonte e repare onde está localizado o trecho de código

 $('table').on('scroll', function () {
    $("table > *").width($("table").width() + $("table").scrollLeft());
}); 

dentro do html

Considerações ## Fonte

Se você tentar acessar algum elemento do DOM ainda no head da página, ele não existirá e um erro acontecerá. Por isso a recomendação de se colocar o script antes de fechar a tag body.

CONTUDO, quem usa jQuery pode usar um recurso da biblioteca (que podemos fazer com JS puro se assim quisermos) que permite carregar o script no head, mas sua execução é feita apenas quando o DOM é montado (exceto o carregamento de imagens, que o jQuery não espera). Essa sintaxe pode ser:

$(document).ready(function() {
// seu código aqui
});
1

Seu script jquery está rodando antes da pagina, é só colocar o script no final que resolve o problema.

0
-1

Sei que é antigo este assunto, mas fiz uma busca e achei este e acabei que fazendo uns ajustes para quem usa bootstrap5.

Nada melhor que retribuir postando as melhorias, é somente incluir os scripts abaixo no HEAD!

Espero que ajude!

-JAVA-SCRIPT/Jquery-

        $('table').on('scroll', function () {

            $("table > *")

               .width(

                    $("table")
                   .width() + $("table")
                   .scrollLeft()

                );
        });

-/JAVA-SCRIPT/Jquery-

-STYLE/CSS-

        table_head_fix {
            border-collapse: collapse;
            width: 100vw;
            max-width: 100vw;
            overflow-x: scroll;
            display: block;
        }
        thead {
        }
        thead, tbody {
            display: block;
        }
        tbody {
            overflow-y: scroll;
            overflow-x: hidden;
            height: 30vh;
        }
        td, th {
            min-width: 5vw;
            width: 50vw;
            max-width: 100vw;
            height: 5vh;
        }

-/STYLE/CSS-

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 .