21

É possível adicionar um comportamento de overflow com scroll somente no tbody de uma table e ainda assim não ter que setar tamanhos fixos em pixels, sem precisar fazer uma separação do cabeçalho das colunas com o corpo, como é visto nos plugins que disponibilizam grids?

css para o overflow:

table.grid tbody {
    overflow-y: scroll;
    overflow-x: auto;
}

tabela:

<table class='grid'>
    <thead> ... <thead>

    <tbody>
        ...
    </tbody>

    <tfoot> ... </tfoot>
</table>

A intenção é que, mesmo uma tabela tendo registros que ultrapassam o limite da área na qual ela está alocada, que ela não sobreponha esse limite, mas que os registros sejam navegáveis por meio da barra de rolagem, como em grids de sistemas desktop, e quem sabe tentar adaptá-la para ser responsivel.


EDIÇÃO

Segue exemplo de como apenas adicionar o css de overflow ao tbody não funciona:

exemplo do funcionamento do overflow no tbody da table

Como podem ver na imagem, a table está inserida em uma div que possui um tamanho fixo de 200px de altura. Porém a table continua ultrapassando esse limite.

1
  • Boa pergunta, a tempos atrás já perdi algum tempo tentando algo do tipo em uma tabela que utilizava, thead, tbody e tfoot, mas não obtive sucesso e acabei tendo que criar os headers o body e o footer da tabela em table separados, que visualmente pareçam o mesmo, mas se obtiver sucesso, dou um rollback em meu projeto. +1 Commented 12/09/2014 às 14:14

2 Respostas 2

8

É possível, mas a solução é meio convoluta por causa do comportamento dos elementos relacionados ao elemento <TABLE>.

Por padrão, tbody possui a propriedade display:row-group. Isso permite aos navegadores manter o alinhamento entre células na mesma coluna em partes diferentes da tabela (thead, tbody e tfoot).

Para permitir overflow, você vai precisar alterar a propriedade display dos elementos thead, tbody e tfoot para block. Porém, isso cria um problema: você perde o alinhamento entre as células do cabeçalho, corpo e rodapé.

Como workaround, você irá precisar coordenar o tamanho das células via JavaScript ou JQuery.

Existe uma resposta no Stack Overflow original que cobre exatamente este comportamento. A seguir, a tradução dos pontos importantes:

Os navegadores exibem os elementos thead e tbody como row-group ( table-header-group e table-row-group) por padrão.

Uma vez que alteramos isso, os elementos tr não preenchem todo o espaço de seu container.

CSS

thead, tbody { display: block; }

tbody {
    height: 100px;       
    overflow-y: auto;    /* Exibe a barra de rolamento vertical     */
    overflow-x: hidden;  /* Esconde a barra de rolamento horizontal */
}

JQuery

// Mude o seletor 'table' de acordo com sua necessidade.
var $table = $('table'),
    $bodyCells = $table.find('tbody tr:first').children(),
    colWidth;

// Obtém o array de largura de colunas dentro de tbody
colWidth = $bodyCells.map(function() {
    return $(this).width();
}).get();

// Ajusta o tamanho das colunas no cabeçalho
$table.find('thead tr').children().each(function(i, v) {
    $(v).width(colWidth[i]);
});    

Um Fiddler com exemplo deste processo (incluindo rodapé) pode ser visto aqui.
Uma versão que respeita o tamanho do container pode ser vista aqui.

2
  • 1
    @TiagoSilva Uma versão respeitando o espaço do container: jsfiddle.net/mh4vz5f5/1
    – OnoSendai
    Commented 12/09/2014 às 15:27
  • 1
    @TiagoSilva, sim, sim, estava analisando a resposta do OnoSendai, e é possível, com algumas limitações, mas é melhor que a minha solução/gambiarra. Na época desisti quando fui ver como esse do PrimeFaces/JSF/Java era feito e verifiquei que era com 3 tabelas, então concluir que seria a unica forma. Mas que bom que há solução e simples pois é um problema redimensionamento de colunas, se é 3 tabelas, tem que ficar fazendo script para manter as colunas sempre no mesmo tamanho. Go! Go! Rollback Project. hehe Commented 12/09/2014 às 16:31
0

É possivel colocar o overflow somente no tbody

HTML

<table>
    <thead>
        <tr>
            <td>Campo1</td>
            <td>Campo 2</td>
        </tr>
    </thead>
    <tbody>
        <tr><td>row1</td><td>row1</td></tr>
        <tr><td>row2</td><td>row2</td></tr>
        <tr><td>row3</td><td>row3</td></tr>
        <tr><td>row4</td><td>row4</td></tr>
        <tr><td>row4</td><td>row4</td></tr>
        <tr><td>row4</td><td>row4</td></tr>

    </tbody>
</table>

CSS

table {
    background-color: #aaa;
}
tbody {
    background-color: #ddd;
    height: 100px;
    overflow: auto;
}
td {
    padding: 3px 10px;
}

http://jsfiddle.net/nyCKE/2/

1
  • Adicionei o Fiddle. E funciona no exemplo Commented 12/09/2014 às 14:30

Você deve fazer log-in para responder a esta pergunta.