7

Como aplicar o scrollbar (barra de rolagem) somente no elemento tbody, assim deixando o elemento caption e thead fixo na tabela, sem se movimentar quando o scrollbar se move.

Abaixo segue o HTML e CSS da tabela:

body {
  font-size: 12px;
  font-family: arial;
}

.text-right {
  text-align: right;
}
.text-center {
  text-align: center;
}

.table {
  border-collapse: collapse;
  background-color: #fff;
  width: 100%;
}
.table caption {
  background-color: #222;
  color: #fff;
  font-size: 14px;
  padding: 5px 0;
}
.table th,
.table td {
  padding: 5px;
}
.table thead {
  background-color: #333;
  color: #fff;
  height: 40px;
}

.table tbody tr {
  border-bottom: 1px solid #999;
}
<table class="table">
   <caption>Notas</caption>
  <thead>
    <tr>
      <th>Avaliação 1:</th>
      <th>Avaliação 2:</th>
      <th>Trabalho:</th>
      <th>Avaliação Substitutiva:</th>
      <th>Nota Final:</th>
      <th>Falta(s):</th>
      <th>Situação:</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-center">-</td>
      <td class="text-right">10</td>
      <td>0</td>
      <td>Aprovado</td>
    </tr>
    <tr>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-center">-</td>
      <td class="text-right">10</td>
      <td>0</td>
      <td>Aprovado</td>
    </tr>
    <tr>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-center">-</td>
      <td class="text-right">10</td>
      <td>0</td>
      <td>Aprovado</td>
    </tr>
    <tr>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-center">-</td>
      <td class="text-right">10</td>
      <td>0</td>
      <td>Aprovado</td>
    </tr>
    <tr>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-center">-</td>
      <td class="text-right">10</td>
      <td>0</td>
      <td>Aprovado</td>
    </tr>
    <tr>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-center">-</td>
      <td class="text-right">10</td>
      <td>0</td>
      <td>Aprovado</td>
    </tr>
    <tr>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-center">-</td>
      <td class="text-right">10</td>
      <td>0</td>
      <td>Aprovado</td>
    </tr>
    <tr>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-center">-</td>
      <td class="text-right">10</td>
      <td>0</td>
      <td>Aprovado</td>
    </tr>
    <tr>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-center">-</td>
      <td class="text-right">10</td>
      <td>0</td>
      <td>Aprovado</td>
    </tr>
    <tr>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-center">-</td>
      <td class="text-right">10</td>
      <td>0</td>
      <td>Aprovado</td>
    </tr>
    <tr>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-center">-</td>
      <td class="text-right">10</td>
      <td>0</td>
      <td>Aprovado</td>
    </tr>
    <tr>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-center">-</td>
      <td class="text-right">10</td>
      <td>0</td>
      <td>Aprovado</td>
    </tr>
    <tr>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-center">-</td>
      <td class="text-right">10</td>
      <td>0</td>
      <td>Aprovado</td>
    </tr>
    <tr>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-center">-</td>
      <td class="text-right">10</td>
      <td>0</td>
      <td>Aprovado</td>
    </tr>
    <tr>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-center">-</td>
      <td class="text-right">10</td>
      <td>0</td>
      <td>Aprovado</td>
    </tr>

  </tbody>
</table>

3
  • 1
    Fiz jsfiddle.net/vqfmrj1x/1, mas desconfio que não é bem o que quer... Ou é?
    – Miguel
    10/06/2016 às 17:03
  • Não, o tbody teria que está abaixo do thead, e o caption está fixed também. 10/06/2016 às 17:09
  • Dessa forma também já tentei. 10/06/2016 às 17:10

2 Respostas 2

15

Mude o display do thead e do tbody para block, defina o tamanho máximo do elemento tbody e o modifique a propriedade overflow-y para scroll.

thead, tbody{
  display: block;  
}

tbody{
  overflow-y: scroll;
  height: 100px;
  }

Foi necessário especificar o tamanho das colunas (td e th) para alinhar o conteúdo com o cabeçalho da tabela.

.table th,
.table td {
  padding: 5px;
  width:20%;
}

Código completo

thead, tbody{
  display: block;  
}

tbody{
  overflow-y: scroll;
  height: 100px;
  }

body {
  font-size: 12px;
  font-family: arial;
}

.text-right {
  text-align: right;
}
.text-center {
  text-align: center;
}

.table {
  border-collapse: collapse;
  background-color: #fff;
  width: 100%;
}
.table caption {
  background-color: #222;
  color: #fff;
  font-size: 14px;
  padding: 5px 0;
}
.table th,
.table td {
  padding: 5px;
  width:20%;
}
.table thead {
  background-color: #333;
  color: #fff;
  height: 40px;
}

.table tbody tr {
  border-bottom: 1px solid #999;
}
<table class="table">
   <caption>Notas</caption>
  <thead>
    <tr>
      <th>Avaliação 1:</th>
      <th>Avaliação 2:</th>
      <th>Trabalho:</th>
      <th>Avaliação Substitutiva:</th>
      <th>Nota Final:</th>
      <th>Falta(s):</th>
      <th>Situação:</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-center">-</td>
      <td class="text-right">10</td>
      <td>0</td>
      <td>Aprovado</td>
    </tr>
    <tr>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-center">-</td>
      <td class="text-right">10</td>
      <td>0</td>
      <td>Aprovado</td>
    </tr>
    <tr>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-center">-</td>
      <td class="text-right">10</td>
      <td>0</td>
      <td>Aprovado</td>
    </tr>
    <tr>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-center">-</td>
      <td class="text-right">10</td>
      <td>0</td>
      <td>Aprovado</td>
    </tr>
    <tr>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-center">-</td>
      <td class="text-right">10</td>
      <td>0</td>
      <td>Aprovado</td>
    </tr>
    <tr>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-center">-</td>
      <td class="text-right">10</td>
      <td>0</td>
      <td>Aprovado</td>
    </tr>
    <tr>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-center">-</td>
      <td class="text-right">10</td>
      <td>0</td>
      <td>Aprovado</td>
    </tr>
    <tr>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-center">-</td>
      <td class="text-right">10</td>
      <td>0</td>
      <td>Aprovado</td>
    </tr>
    <tr>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-center">-</td>
      <td class="text-right">10</td>
      <td>0</td>
      <td>Aprovado</td>
    </tr>
    <tr>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-center">-</td>
      <td class="text-right">10</td>
      <td>0</td>
      <td>Aprovado</td>
    </tr>
    <tr>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-center">-</td>
      <td class="text-right">10</td>
      <td>0</td>
      <td>Aprovado</td>
    </tr>
    <tr>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-center">-</td>
      <td class="text-right">10</td>
      <td>0</td>
      <td>Aprovado</td>
    </tr>
    <tr>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-center">-</td>
      <td class="text-right">10</td>
      <td>0</td>
      <td>Aprovado</td>
    </tr>
    <tr>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-center">-</td>
      <td class="text-right">10</td>
      <td>0</td>
      <td>Aprovado</td>
    </tr>
    <tr>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-center">-</td>
      <td class="text-right">10</td>
      <td>0</td>
      <td>Aprovado</td>
    </tr>

  </tbody>
</table>

1
  • Obrigado, praticamente é o que quero, porém o thead fica desalinhado, em relação ao tbody. 10/06/2016 às 17:59
0

Para resolver esse problema eu apliquei a seguinte solução:

Primeiramente definir a .table thead tr como um elemento de bloco e em posição relativa:

.table thead tr {
  display: block;
  position: relative;
}

Definir um tamanho para o .table td e .table th com no minimo 15% de tamanho dentro da tabela, para não ficarem com tamanhos diferentes um em relação ao outro:

.table td,
.table th {
  min-width: 15%;
}

E como a colona 4 é um pouco maior, definir um tamanho de 150px:

.table td:nth-child(4),
.table th:nth-child(4) {
  width: 150px;
}

E para finalizar, definir o tbody da seguinte forma, deixando ele como um elemento de bloco de altura de 300px e largura de 100% dentro da tabela, e para mostrar o scrollbar definir a propriedade overflow como auto, para mostrar tanto o scrollbar da esquerda quanto o de baixo do tbody:

.table tbody {
  display: block;
  overflow: auto;
  width: 100%;
  height: 300px;
} 

Solução completa:

body {
  font-size: 12px;
  font-family: arial;
}

.text-right {
  text-align: right;
}
.text-center {
  text-align: center;
}

.table {
  border-collapse: collapse;
  background-color: #fff;
  width: 100%;
}
.table caption {
  background-color: #222;
  color: #fff;
  font-size: 14px;
  padding: 5px 0;
}
.table th,
.table td {
  padding: 5px;
}
.table thead {
  background-color: #333;
  color: #fff;
  height: 40px;
}
.table thead tr {
  display: block;
  position: relative;
}
.table td,
.table th {
  min-width: 15%;
}
.table td:nth-child(4),
.table th:nth-child(4) {
  width: 150px;
}
.table tbody {
  display: block;
  overflow: auto;
  width: 100%;
  height: 300px;
}
.table tbody tr {
  border-bottom: 1px solid #999;
}
.table tbody tr:hover {
  background-color: #888;
}
.table tbody tr td:hover {
  background-color: #999;
}
<table class="table">
   <caption>Notas</caption>
  <thead>
    <tr>
      <th>Avaliação 1:</th>
      <th>Avaliação 2:</th>
      <th>Trabalho:</th>
      <th>Avaliação Substitutiva:</th>
      <th>Nota Final:</th>
      <th>Falta(s):</th>
      <th>Situação:</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-center">-</td>
      <td class="text-right">10</td>
      <td>0</td>
      <td>Aprovado</td>
    </tr>
    <tr>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-center">-</td>
      <td class="text-right">10</td>
      <td>0</td>
      <td>Aprovado</td>
    </tr>
    <tr>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-center">-</td>
      <td class="text-right">10</td>
      <td>0</td>
      <td>Aprovado</td>
    </tr>
    <tr>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-center">-</td>
      <td class="text-right">10</td>
      <td>0</td>
      <td>Aprovado</td>
    </tr>
    <tr>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-center">-</td>
      <td class="text-right">10</td>
      <td>0</td>
      <td>Aprovado</td>
    </tr>
    <tr>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-center">-</td>
      <td class="text-right">10</td>
      <td>0</td>
      <td>Aprovado</td>
    </tr>
    <tr>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-center">-</td>
      <td class="text-right">10</td>
      <td>0</td>
      <td>Aprovado</td>
    </tr>
    <tr>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-center">-</td>
      <td class="text-right">10</td>
      <td>0</td>
      <td>Aprovado</td>
    </tr>
    <tr>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-center">-</td>
      <td class="text-right">10</td>
      <td>0</td>
      <td>Aprovado</td>
    </tr>
    <tr>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-center">-</td>
      <td class="text-right">10</td>
      <td>0</td>
      <td>Aprovado</td>
    </tr>
    <tr>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-center">-</td>
      <td class="text-right">10</td>
      <td>0</td>
      <td>Aprovado</td>
    </tr>
    <tr>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-center">-</td>
      <td class="text-right">10</td>
      <td>0</td>
      <td>Aprovado</td>
    </tr>
    <tr>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-center">-</td>
      <td class="text-right">10</td>
      <td>0</td>
      <td>Aprovado</td>
    </tr>
    <tr>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-center">-</td>
      <td class="text-right">10</td>
      <td>0</td>
      <td>Aprovado</td>
    </tr>
    <tr>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-center">-</td>
      <td class="text-right">10</td>
      <td>0</td>
      <td>Aprovado</td>
    </tr>

  </tbody>
</table>

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 .