Table fixed header and scrollable body

Question

I am trying to make a table with fixed header and a scrollable content using the bootstrap 3 table. Unfortunately the solutions I have found does not work with bootstrap or

Answer 1

I used the floatThead jQuery plugin (https://mkoryak.github.io/floatThead/#intro)

docs say it works with Bootstrap 3 tables and I can say it also works with Bootstrap 4 tables with or without the table-responsive helper.

Using the plugin is as simple as this:

HTML (vanilla bootstrap table markup)

   ......

Plugin Initialization:

$(document).ready(function() {
    var tbl=$('#myTable');
    tbl.floatThead({
        responsiveContainer: function(tbl) {
            return tbl.closest('.table-responsive');
        }
    });
});

Full disclaimer: I am not associated with the plugin in any way. I happened to find it after hours of trying lots of other solutions posted here and elsewhere.