With overflow scroll, how can I set the tbody height?

Problem

When I try to set the tbody height width overflow scroll, I get an error.

<style> 
     tbody{
       height:50px;display:block;overflow:scroll
     }
   </style>

       <h3>Table B</h3>
    <table style="border: 1px solid red;width:300px;display:block">
        <thead>
            <tr>
                <td>Name</td>
                <td>phone</td>
            </tr>
        </thead>
        <tbody style='height:50px;display:block;overflow:scroll'>
            <tr>
                <td>AAAA</td>
                <td>323232</td>
            </tr>
            <tr>
                <td>BBBBB</td>
                <td>323232</td>
            </tr>
            <tr>
                <td>CCCCC</td>
                <td>3435656</td>
            </tr>
        </tbody>
    </table>

Here is a link to my fiddle.

Table B should have the same overflow scroll as Table A.

Any assistance will be greatly appreciated.

Many Thanks, M.

Asked by Maverick

Solution #1

Set tbody’s display: block; if you want it to show a scrollbar.

For the tr, set display: table; so that it behaves like a table.

Use table-layout: fixed; to uniformly distribute the cells.

DEMO

CSS:

table, tr td {
    border: 1px solid red
}
tbody {
    display: block;
    height: 50px;
    overflow: auto;
}
thead, tbody tr {
    display: table;
    width: 100%;
    table-layout: fixed;/* even columns width , fix width of table too*/
}
thead {
    width: calc( 100% - 1em )/* scrollbar is average 1em/16px width, remove it from thead width */
}
table {
    width: 400px;
}

Set the scroll at any time with: overflow-y: scroll; if tbody doesn’t show a scroll because the content is less than height or max-height. DEMO

04/2021 (2019)

So far, there hasn’t been a perfect CSS-only solution. There are a few common ways to customize it to fit your table (table-layout:fixed; fixes table and column widths, however javascript could possibly be used to reset those values => exit pure CSS).

Answered by G-Cyrillus

Solution #2

Another option is to enclose your table with a scrollable element and have the header cells stay at the top of the page.

The benefit of this approach is that you don’t have to update the tbody display and you can leave the browser to determine column width while maintaining the header cell widths consistent with the data cell column widths.

Answered by brandonkal

Solution #3

It is an easy method of adding a scroll bar to the table body.

Answered by Dinesh Vaitage

Solution #4

Overflow does not apply to table group elements by default unless you give tbody> a display:block and thead> a position:relative and display: block. Examine the DEMO.

.fixed {
  width:350px;
  table-layout: fixed;
  border-collapse: collapse;
}
.fixed th {
  text-decoration: underline;
}
.fixed th,
.fixed td {
  padding: 5px;
  text-align: left;
  min-width: 200px;
}


.fixed thead {
  background-color: red;
  color: #fdfdfd;
}
.fixed thead tr {
  display: block;
  position: relative;
}
.fixed tbody {
  display: block;
  overflow: auto;
  width: 100%;
  height: 100px;
  overflow-y: scroll;
    overflow-x: hidden;
}

Answered by Kheema Pandey

Solution #5

The simplest solution is:

In CSS, paste the following code:

.tableClassName tbody {
  display: block;
  max-height: 200px;
  overflow-y: scroll;
}

.tableClassName thead, .tableClassName tbody tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}
.tableClassName thead {
  width: calc( 100% - 1.1em );
}

Answered by Gil Baggio

Post is based on https://stackoverflow.com/questions/23989463/how-to-set-tbody-height-with-overflow-scroll