Freeze row of an html table

Asked

Viewed 4,509 times

1

I would like to know how to freeze a row of an html table, for example Tabela Exemplo

I would like to freeze the 1 row of the table, for when I descend the scroll it accompanies, could someone help me? I tried to use position Absolute, but it does not work in my case, because when I use the horizontal scroll they are fixed and do not accompany it.

html css table

  • Thinking quickly here, only if you split the table in two. The Header one and the part of the rows inside a DIV with scroll....

  • Make your code available

  • I believe something like this: table tbody, table thead { display: block; } and this table tbody { overflow: auto; height: 100px; }

  • Send your HTML to test here....

1 answer

2


Follow an example.

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

  • 1

    When publishing HTML code with CSS, you can click on the image side icon, add the snippets to their respective types, so it will be displayed a "Run" field below the code, when clicked, we will see in practice the execution of your code and if everything is OK.

  • Your answer works correctly. I just have one remark: You can put some extra explanation to facilitate understanding?

  • I wanted to freeze only vertically, more or less what excel does know?

  • I know, but then I think you have to separate the table into two......

Browser other questions tagged html css table

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