fixed header and scrollable body in table in html angular

Question

In Angular i have a table and it should be scrollable. But header should be fixed. but while scrolling header is not fixed. please help

Answer 1

Well, the requirement seems to be you want a scrollable table body. Not sure if angular could makes things different anyhow in this case. Just to be sure, please see the fiddle at https://jsfiddle.net/hh6etg6s/ if this serves the purpose.

.tablediv {
  padding:20px;
}
table ,tr td{
    border:1px solid red
}
tbody {
    display:block;
    height:200px;
    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;
}