Fix table header at top of scrollable div

Question

The div in this example is scrollable, how do I make the header of the table fixed to the top of the div?

Answer 1

I would split into 2 sections and dictate the widths (% if responsive).

A
B





A
B


A
B


A
B

CSS....

#table{
    overflow-y: auto; 
    height:150px;
    border-bottom:1px solid grey;
}
table{
    width:100%;
}
table td, table th{
    border-color: grey;
    border: 1px solid;  
    width:50%;
}

https://jsfiddle.net/tonytansley/mvp4u54q/