1

Gostaria de saber como congelo uma linha de uma tabela html, por exemplo Tabela Exemplo

Gostaria de congelar a 1 linha da tabela, para quando eu descesse o scroll ela acompanhasse, alguém poderia me ajuda? já tentei usar position absolute, porem não funciona no meu caso, porque quando uso o scroll horizontal as ficam fixa e não o acompanham.

4
  • Pensando rapidamente aqui, só se você dividir a tabela em duas. O Cabeçalho uma e a parte das linhas dentro de uma DIV com scroll....
    – Marcondes
    6/07/2017 às 16:44
  • Disponibilize seu código
    – Bsalvo
    6/07/2017 às 16:44
  • Acredito que alguma coisa assim: table tbody, table thead { display: block; } e isso table tbody { overflow: auto; height: 100px; }
    – Marcondes
    6/07/2017 às 16:46
  • Manda o seu HTML para testar aqui....
    – Marcondes
    6/07/2017 às 16:47

1 Resposta 1

2

Segue um exemplo.

/* Vamos definir o CSS */
/* primeiramente definindo o display block na sequinte estrutura de elementor: table tbody e para table thead. Veja que a tabela terá que ser definida com a estrutura. */
table tbody,
table thead {
  display: block;
}

/* Agora vamos definir o elemento tbody, para overflow: auto. Ativando assim as barras de rolagem. */
table tbody {
  overflow: auto;
  height: 100px;
}
<!-- Agora vamos criar a nossa tabela. Para esse exemplo temos que criar a estrutura com table e thead. Para o cabeçalho da tabela. -->
<table border="1">
  <thead>
    <tr>
      <td>teste</td>
      <td>teste</td>
    </tr>
    <thead>
<!-- E aqui vamos definir o tbody da tabela, onde será exibido os dados. no tbody será aplicada a propriedade overflow:auto; no CSS. -->
      <tbody>
        <tr>
          <td>teste</td>
          <td>teste</td>
        </tr>
        <tr>
          <td>teste</td>
          <td>teste</td>
        </tr>
        <tr>
          <td>teste</td>
          <td>teste</td>
        </tr>
        <tr>
          <td>teste</td>
          <td>teste</td>
        </tr>
        <tr>
          <td>teste</td>
          <td>teste</td>
        </tr>
        <tr>
          <td>teste</td>
          <td>teste</td>
        </tr>
        <tr>
          <td>teste</td>
          <td>teste</td>
        </tr>
        <tr>
          <td>teste</td>
          <td>teste</td>
        </tr>
        <tbody>
</table>

4
  • 1
    Na hora de publicar código HTML com CSS, você pode clicar no ícone do lado da imagem, adicione os trechos aos seus respectivos tipos, assim será exibido um campo de "Executar" abaixo do código, quando clicado, vamos ver na prática a execução do seu código e se está tudo OK. 6/07/2017 às 16:53
  • Sua resposta funciona corretamente. Só tenho uma observação: Você pode colocar alguma explicação extra para facilitar o entendimento?
    – Sorack
    6/07/2017 às 16:59
  • Eu queria congelar so verticalmente, mais ou menos o que o excel faz sabe? 6/07/2017 às 17:27
  • Sei, mas dai eu acho que tem que separa a tabela em duas......
    – Marcondes
    6/07/2017 às 20:02

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 .