CODEWITHSUNDEEP
htmlcss
MNK
MNK

Reputation: 131

Vertical scrollbar is not working properly in html table

I need to set scroll for tbody if number of records will be more that time I view the records by using scroll bar. For that I have used vertical scrollbar for the tbody of the table. Scrollbar is working correctly in that case that all column values(tbody) are coming under the single th column. How to resolve this one? In this sample I have used css for tbody

tbody {
    height: calc(100vh - 340px);
    display: block;
    width: 100%;
    overflow-y: auto;
}

Upvotes: 3

Views: 3260

Answers (3)

Vinoth
Vinoth

Reputation: 1113

Add this in your css class. this will work.

table ,tr td{
    border:1px solid red
}
tbody {
    display:block;
    height:50px;
    overflow:auto;
      height: calc(100vh - 360px);
}
thead, tbody tr {
    display:table;
    width:100%;
    table-layout:fixed;
}
thead {
    width: calc( 100% - 1em )
}
table {
    width:400px;
}

updated js fiddle https://jsfiddle.net/vinothsm92/pL1wqaj1/12/

Upvotes: 1

Shas
Shas

Reputation: 101

Check with this : 

tbody {
    position: absolute;
    width: 100%;
    height: 400px;
    overflow: hidden;
    overflow-y: scroll;
}

and remove 

.scrollbar {
    height: 450px;
    overflow-y: auto; // Remove this line
}

Upvotes: 0

Klaus Mikaelson
Klaus Mikaelson

Reputation: 572

Remove one line from your css

tbody {
    height: 100%;
    display: block;//<--- Remove this line
    width: 100%;
    overflow-y: auto;
}

Upvotes: 2

Related Questions