How to scroll tbody?

Question

I want a table to have a scrollable tbody, but headers should not scroll.

The table should not occupy 100% width. The columns should not be wider than the content.

How do I do that?

Trying at https://jsfiddle.net/vxmyh826/4/ to make it look like

With the css

table
{
  border-collapse: collapse;
  max-height: 200px;
  display: inline-block;
}

tbody
{
  max-height: 200px;
  width: 100%;
  display: inline-block;
  overflow-y: scroll;
}

and it will rather look something like

with the table border marked with red.

edit

This is not a duplicate of the said link because I do not look for a solution that uses scripting (it is a css question).

Possible duplicate of [HTML table with 100% width, with vertical scroll inside tbody](http://stackoverflow.com/questions/17067294/html-table-with-100-width-with-vertical-scroll-inside-tbody) — rmalviya, Mar 21 '17 at 08:14
add `overflow: hidden;` on tbody so you can make use of scroll. — Dinca Adrian, Mar 21 '17 at 08:16
@DincaAdrian How `overflow: hidden;` can make content scrollable? — rmalviya, Mar 21 '17 at 08:22
Sorry, my bad, I just say the text overflowing and thought of hidden. The solution is a little more complex though. A complete solution is presented here with demos and pictures. http://stackoverflow.com/questions/17067294/html-table-with-100-width-with-vertical-scroll-inside-tbody — Dinca Adrian, Mar 21 '17 at 09:15
@malviya The accepted solution on that page suggests a script solution to set column widths which makes it not a duplicate. — Anders Lindén, Mar 21 '17 at 09:32
@DincaAdrian The link was already suggested, but as I said, the accepted answer uses scripting. — Anders Lindén, Mar 21 '17 at 09:35

score 1 · Answer 1 · answered Feb 27 '23 at 10:31

1

table {
    display: inline-block;
}

tbody {
    display: block;
    height: 40rem;
    overflow-y: auto;
}

answered Feb 27 '23 at 10:31

Irinel

11
1

Mateus C · Answer 2 · 2019-01-27T01:50:16.867

HTML

<body>
    <table>
        <thead>
            <tr>
                <th>Name</th>
                <th>City</th>
                <th>Age</th>
                <th>Description</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td>Don Joe</td>
                <td>Itajai</td>
                <td>20</td>
                <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod temp. Excepteur sint occaecat cupidatat no</td>
            </tr>
            <tr> 
             ...
            </tr>

CSS

table{
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

table th, table td{
    text-align: left;
    width: 25%;
}

table td{
    border-bottom: 1px solid black;
}

table tbody{
    display: block;
    overflow: auto;
    height: 200px;
}

 table thead{
     width:100%;
     display: table;
 }

The "table tbody{ display:block; overflow: auto; height:200;}" make the tbody scroll but the width get mess. To correct you have to set "table thead{ width: calc(100% - 20px);display: table;}" and set the width for each column.

Kunal Vohra · Answer 3 · 2019-01-27T04:35:53.500

0

To do the same you have to use two < thead > I.e.

< thead >
             Your th here
< / thead >

Repeat the thead again.

< thead  >
             Your th here
< / thead >

And then your < tbody >

It will resolve the issue.

edited Jan 27 '19 at 04:35

answered Jan 27 '19 at 02:01

Kunal Vohra

2,703
2
15
33

How to scroll tbody?

edit

3 Answers3