Freeze line from an html table

Question

Freeze line from an html table

Navigation

#1 by (2 votes)

1

I would like to know how to freeze a line from an html table, for example

I would like to freeze the 1 row of the table, by the time I scroll down it came along, could anyone help me? I already tried to use absolute position, but it does not work in my case, because when I use the horizontal scroll, they stay fixed and do not follow it.

html css tabela

asked by anonymous 06.07.2017 / 18:42

1 answer

SMTP Error: The following recipients failed hotmail for companydomain addClass within this

score 2 · Accepted Answer

Here's 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>