html table with vertical scroll inside tbody

Question

I am trying for a vertical scroll bar inside tbody with a fixed header. I tried solution provided in the link.

HTML table with 100% width, with vertical scroll inside tbody

table {
width: 100%;
border-spacing: 0;
}

thead, tbody, tr, th, td { display: block; }

thead tr {
/* fallback */
width: 97%;
/* minus scroll bar width */
width: -webkit-calc(100% - 16px);
width:    -moz-calc(100% - 16px);
width:         calc(100% - 16px);
}

tr:after {  /* clearing float */
content: ' ';
display: block;
visibility: hidden;
clear: both;
}

tbody {
height: 100px;
overflow-y: auto;
overflow-x: hidden;
}

tbody td, thead th {
width: 19%;  /* 19% is less than (100% / 5 cols) = 20% */
float: left;
}

It works fine if scroll bar appears.But if the rows are few and the scroll bar doesn't appear, then thead is not aligned with tbody. How can I fix the issue with css?

Can you insert a jsfiddle in the post? – Pascal Goldbach Jun 28 '16 at 12:03 — Pascal Goldbach, Jun 28 '16 at 12:03

score 4 · Answer 1 · answered Jun 28 '16 at 12:17

4

Once your tbody data move-out from assigned height, your y-axis get's activated.

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

answered Jun 28 '16 at 12:17

frnt

8,455
2
22
25

Tomasz Stanczak · Answer 2 · 2016-06-28T12:30:07.507

That's because the CSS above reduces the width of the thead tr's width to 97% or (100% - the width of the scrollbar) to accomodate for the reduced width of the tbody because of the scrollbar in tbody only. If there is no scrollbar in tbody then the tbody remains fully 100% wide but the thead is still being narrowed.

You wish to fix is with the CSS, well the CSS cannot recognize the fact that there are not enough rows to for the scrollbar to show. You will be able to fix it using JavaScript though - just look in the answer you have cited, there are examples of using JavaScript to apply the width of the tbody columns to thead just at the beginning of the answer.

EDIT

Or force vertical scrollbar at all times, such that the width of the tbody doesn't change regardless of the row count:

tbody {
    # ... other attributes
    overflow-y: scroll;
}

taken from: Force Vertical Scrollbar

Thanks. I tried jquery solution provided it works fine – Nagendra Jun 29 '16 at 09:58 — Nagendra, Jun 29 '16 at 09:58

score 0 · Answer 3 · answered Jun 28 '16 at 12:17

0

Use tbody max-height:100px instead of height:100px

tbody {
    max-height: 100px;
    overflow-y: auto;
    overflow-x: hidden;
}

answered Jun 28 '16 at 12:17

Mani

2,675
2
20
42

html table with vertical scroll inside tbody

3 Answers3