Hi, I am using a DataTables widget. the table header is two rows and I am using a the following css for the header to remain sticky at the top of page in order to prevent from scrolling when the table is large. the issue is because I am using a multi row header then the bottom row is scrolling. you can see the following image

I want all the head rows to remain sticky!

this is the table head before scroll

this is the table head after scroll

solved with fixedHeader plugin

DataTables::create(array(
                "plugins" => [ "FixedHeader" ],
                "options"=>array(
                    "fixedHeader"=>true,