0

Tenho a seguinte tabela:

.mytable {
  width: 100%;
  height: 150px;
  overflow-y: auto;
}

.header, .footer {
  //position: absolute;
}
<table border="1" class="mytable">
   <tr class="header">
     <th rowspan="2">H1</th>
     <th colspan="3">H2</th>
     <th rowspan="2">H3</th>
     <th rowspan="2">H4</th>
   </tr>
   <tr class="header">
     <th>H2.1</th>
     <th>H2.2</th>
     <th>H2.3</th>
   </tr>
   
   <tr>
     <td>I1 H1</td>
     <td>I1 H2</td>
     <td>I1 H3</td>
     <td>I1 H4</td>
     <td>I1 H5</td>
     <td>I1 H6</td>
   </tr>
   
   <tr>
     <td>I2 H1</td>
     <td>I2 H2</td>
     <td>I2 H3</td>
     <td>I2 H4</td>
     <td>I2 H5</td>
     <td>I2 H6</td>
   </tr>
   
   <tr>
     <td>I3 H1</td>
     <td>I3 H2</td>
     <td>I3 H3</td>
     <td>I3 H4</td>
     <td>I3 H5</td>
     <td>I3 H6</td>
   </tr>
   
   <tr>
     <td>I4 H1</td>
     <td>I4 H2</td>
     <td>I4 H3</td>
     <td>I4 H4</td>
     <td>I4 H5</td>
     <td>I4 H6</td>
   </tr>
   
   <tr>
     <td>I5 H1</td>
     <td>I5 H2</td>
     <td>I5 H3</td>
     <td>I5 H4</td>
     <td>I5 H5</td>
     <td>I5 H6</td>
   </tr>
   
   <tr>
     <td>I6 H1</td>
     <td>I6 H2</td>
     <td>I6 H3</td>
     <td>I6 H4</td>
     <td>I6 H5</td>
     <td>I6 H6</td>
   </tr>
   
   <tr class="footer">
     <th>FH1</th>
     <th>FH2</th>
     <th>FH3</th>
     <th>FH4</th>
     <th>FH5</th>
     <th>FH6</th>
   </tr>
   
</table>

Eu gostaria de fixar o cabeçalho e rodapé e disponibilizar o scroll.

Minha pergunta foge um pouco do contexto das perguntas semelhantes, pois mesclo linhas no cabeçalho.

O resultado desejado seria:

inserir a descrição da imagem aqui

Considerando o scroll e o alinhamento das colunas.

Eu gostaria muito de usar apeans uma tabela.

2
  • Não entendi. O que você quer fazer?
    – Randrade
    Commented 4/11/2016 às 12:26
  • colocar o scroll na tabela e deixar o cabeçalho e rodapé fixos... Commented 4/11/2016 às 12:28

2 Respostas 2

1

Antes de tudo que tal organizar a sua tabela?

Utilize as tags thead, tbody e tfoot para melhor organização da sua tabela. Leia mais sobre isso nesta resposta

Já a resposta que procura, seria algo parecido com isso?

.mytable {
  border: 0;
  border-collapse: collapse;
  width: 100%;
}
.mytable tr {
  display: flex;
}
.mytable td {
  padding: 3px;
  flex: 1 auto;
  border: 1px solid #aaa;
  width: 1px;
  word-wrap: break;
}

.mytable thead th {
  flex: 1 auto;
  display: block;
  border: 1px solid #000;
}

.mytable tbody {
  display: block;
  width: 100%;
  overflow-y: auto;
  height: 200px;
}
<table border="1" class="mytable">
  <thead>
    <tr class="header">
      <th rowspan="2">H1</th>
      <th colspan="3">H2</th>
      <th rowspan="2">H3</th>
      <th rowspan="2">H4</th>
    </tr>
    <tr class="header">
      <th>H2.1</th>
      <th>H2.2</th>
      <th>H2.3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>I1 H1</td>
      <td>I1 H2</td>
      <td>I1 H3</td>
      <td>I1 H4</td>
      <td>I1 H5</td>
      <td>I1 H6</td>
    </tr>

    <tr>
      <td>I2 H1</td>
      <td>I2 H2</td>
      <td>I2 H3</td>
      <td>I2 H4</td>
      <td>I2 H5</td>
      <td>I2 H6</td>
    </tr>

    <tr>
      <td>I3 H1</td>
      <td>I3 H2</td>
      <td>I3 H3</td>
      <td>I3 H4</td>
      <td>I3 H5</td>
      <td>I3 H6</td>
    </tr>

    <tr>
      <td>I4 H1</td>
      <td>I4 H2</td>
      <td>I4 H3</td>
      <td>I4 H4</td>
      <td>I4 H5</td>
      <td>I4 H6</td>
    </tr>

    <tr>
      <td>I5 H1</td>
      <td>I5 H2</td>
      <td>I5 H3</td>
      <td>I5 H4</td>
      <td>I5 H5</td>
      <td>I5 H6</td>
    </tr>

    <tr>
      <td>I6 H1</td>
      <td>I6 H2</td>
      <td>I6 H3</td>
      <td>I6 H4</td>
      <td>I6 H5</td>
      <td>I6 H6</td>
    </tr>
    <tr>
      <td>I1 H1</td>
      <td>I1 H2</td>
      <td>I1 H3</td>
      <td>I1 H4</td>
      <td>I1 H5</td>
      <td>I1 H6</td>
    </tr>
    <tr>
      <td>I1 H1</td>
      <td>I1 H2</td>
      <td>I1 H3</td>
      <td>I1 H4</td>
      <td>I1 H5</td>
      <td>I1 H6</td>
    </tr>
    <tr>
      <td>I1 H1</td>
      <td>I1 H2</td>
      <td>I1 H3</td>
      <td>I1 H4</td>
      <td>I1 H5</td>
      <td>I1 H6</td>
    </tr>
    <tr>
      <td>I1 H1</td>
      <td>I1 H2</td>
      <td>I1 H3</td>
      <td>I1 H4</td>
      <td>I1 H5</td>
      <td>I1 H6</td>
    </tr>
    <tr>
      <td>I1 H1</td>
      <td>I1 H2</td>
      <td>I1 H3</td>
      <td>I1 H4</td>
      <td>I1 H5</td>
      <td>I1 H6</td>
    </tr>
    <tr>
      <td>I1 H1</td>
      <td>I1 H2</td>
      <td>I1 H3</td>
      <td>I1 H4</td>
      <td>I1 H5</td>
      <td>I1 H6</td>
    </tr>
    <tr>
      <td>I1 H1</td>
      <td>I1 H2</td>
      <td>I1 H3</td>
      <td>I1 H4</td>
      <td>I1 H5</td>
      <td>I1 H6</td>
    </tr>
    <tr>
      <td>I1 H1</td>
      <td>I1 H2</td>
      <td>I1 H3</td>
      <td>I1 H4</td>
      <td>I1 H5</td>
      <td>I1 H6</td>
    </tr>
    <tr>
      <td>I1 H1</td>
      <td>I1 H2</td>
      <td>I1 H3</td>
      <td>I1 H4</td>
      <td>I1 H5</td>
      <td>I1 H6</td>
    </tr>
    <tr>
      <td>I1 H1</td>
      <td>I1 H2</td>
      <td>I1 H3</td>
      <td>I1 H4</td>
      <td>I1 H5</td>
      <td>I1 H6</td>
    </tr>
    <tr>
      <td>I1 H1</td>
      <td>I1 H2</td>
      <td>I1 H3</td>
      <td>I1 H4</td>
      <td>I1 H5</td>
      <td>I1 H6</td>
    </tr>
    <tr>
      <td>I1 H1</td>
      <td>I1 H2</td>
      <td>I1 H3</td>
      <td>I1 H4</td>
      <td>I1 H5</td>
      <td>I1 H6</td>
    </tr>
    <tr>
      <td>I1 H1</td>
      <td>I1 H2</td>
      <td>I1 H3</td>
      <td>I1 H4</td>
      <td>I1 H5</td>
      <td>I1 H6</td>
    </tr>
  </tbody>

  <tfooter>
    <tr class="footer">
      <th>FH1</th>
      <th>FH2</th>
      <th>FH3</th>
      <th>FH4</th>
      <th>FH5</th>
      <th>FH6</th>
      <tr>
  </tfooter>

</table>

Se for isso, a linha que realmente faz o trabalho é essa:

.mytable tbody {
  display: block;
  width: 100%;
  overflow-y: auto;
  height: 200px;
}

Onde você seta o height e o overflow-y.

Para mais informações, veja esta pergunta.

Bom, isso é feito apenas com CSS e gera um segundo scroll.

Porém, se quiser fazer com javascript, existem vários códigos prontos ensinando como fazer.

2
  • É exatamente isso @Randrade e muito obrigado pela dica da organização. Só não consigo trabalhar bem com o alinhamento, pois veja que em seu código está diferente do original... Commented 4/11/2016 às 12:58
  • @JedaiasRodrigues Isso nada mais é do que CSS. Basta remover as demais linhas que achar desnecessário para o layout que irá ficar da mesma forma.
    – Randrade
    Commented 4/11/2016 às 13:00
0

Pessoalmente eu usaria uma div fixada no topo com uma tabela com os cabeçalhos e abaixo outra div com a tabela com conteúdo, assim o scroll fica fácil e criado pelo próprio navegador.

2
  • O problema é o alinhamento, apesar de eu ter exemplificado com um código fixo, as colunas da tabela são dinâmicas, o que dificultaria um pouco mais trabalhar com divs. Commented 4/11/2016 às 12:59
  • Entendi! Nesse caso o modelo do @Randrade ou usar plugins... Commented 4/11/2016 às 15:40

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 .