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


Viewed 1,671 times


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 class='grid'>
    <thead> ... <thead>


    <tfoot> ... </tfoot>

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.


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

exemplo do funcionamento do overflow no tbody da table

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.

  • Good question, long ago I already spent some time trying something of the kind in a table I used, thead, tbody and tfoot, but I did not succeed and ended up having to create the headers the body and the footer of the table in table separate, visually look the same, but if successful, I give a rollback in my project. + 1

2 answers


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.


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 */


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

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

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

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

  • 1

    @Tiagosilva A version respecting the container space:

  • 1

    @Thiagosilva, yes, yes, I was analyzing Onosendai’s response, and it’s possible, with some limitations, but it’s better than my solution/gambiarra. At the time I gave up when I went to see how the one from Primefaces/JSF/Java It was done and I checked that it was with 3 tables, so I concluded that it would be the only form. But good that there is solution and simple because it is a problem resizing columns, if it is 3 tables, have to stay making script to keep the columns always in the same size. Go! Go! Rollback Project. hehe


It is possible to put the overflow only in tbody


            <td>Campo 2</td>



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

  • I added Fiddle. And it works in the example

Browser other questions tagged

You are not signed in. Login or sign up in order to post.