Is it possible to add an overflow behavior with scroll only in tbody of a table?

Question

It is possible to add a behavior of overflow with scroll only in the tbody of a table and still not have to set fixed sizes in pixels, without having to separate the column header with the body, as seen in plugins that make available grids?

css for the overflow:

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

table:

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

    <tbody>
        ...
    </tbody>

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

The intention is that even a table having records that exceed the limit of the area in which it is allocated, that it does not override this limit, but that the records are navigable through the scrollbar, as in grids of desktop systems, and who knows try to adaptI was going to be responsivel.

---

EDITION

Here’s an example of how to just add the css of overflow at the tbody doesn’t work:

As you can see in the image, the table is inserted in a div which has a size fixed height 200px. But the table continues to exceed this limit.

Answer 1

It is possible, but the solution is half convoluted because of the behavior of elements related to the element <TABLE>.

By default, tbody owns the property display:row-group. This allows browsers to maintain cell alignment in the same column in different parts of the table (thead, tbody and tfoot).

To allow overflow, you will need to change the property display of the elements thead, tbody and tfoot for block. However, this creates a problem: you lose alignment between header, body and footer cells.

Like workaround, you will need to coordinate the size of cells via Javascript or Jquery.

There is an answer in the original Stack Overflow that exactly covers this behavior. Next, the translation of the important points:

Browsers display the thead and tbody elements as Row-group ( table-header-group and table-Row-group) by default.

Once we change that, the elements tr do not fill all the space of your 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]);
});    

A Fiddler with example of this process (including footer) can be seen here.
A version that respects the container size can be seen here.

Answer 2

It is possible to put the overflow only in 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/