Freeze Column Headers of a grid

Hello, I've looked everywhere and I've found answers on here that don't actually freeze the column headers of the grid question. I have all of the CSS/Javascript in the footer of the question to make it into a scrollable table, but I'm not sure what to manipulate to make it freeze the column headers, since I don't really know any programming languages. Here is the code that I currently have in the footer: the question name is "CurrentHealth"

<style>
#CurrentHealth_div > .question_body {
height: 200px;
}

#CurrentHealth_div > .question_body > table {
display: flex;
flex-flow: column;
height: 100%;
width: 100%;
}

#CurrentHealth_div > .question_body > table > thead {
/* head takes the height it requires,
and it's not scaled when table is resized */
flex: 0 0 auto;
width: calc(100% - 0.9em);
}

#CurrentHealth_div > .question_body > table > tbody {
/* body takes all the remaining available space */
flex: 1 1 auto;
display: block;
height:200px;
overflow-y: auto;
}

#CurrentHealth_div > .question_body > table > tbody > tr {
width: 100%;
}

#CurrentHealth_div > .question_body > table > thead,
#CurrentHealth_div > .question_body > table > tbody > tr {
display: table;
table-layout: fixed;
}
</style>
<script>
$(document).ready(function(){
$('#CurrentHealth_div > .question_body > table').prepend('<thead><tr></tr><tr></tr></thead>');

$('#CurrentHealth_div > .question_body > table > tbody > tr:first-child > td').each(function(){
var tdHtml = $(this).html();
$('#CurrentHealth_div > .question_body > table > thead > tr:first-child').append('<thead>' + tdHtml + '</th>');
});
$('#CurrentHealth_div > .question_body > table > tbody > tr:first-child').remove();

$('#CurrentHealth_div > .question_body > table > tbody > tr:first-child > td').each(function(){
var tdHtml = $(this).html();
$('#CurrentHealth_div > .question_body > table > thead > tr:last-child').append('<thead>' + tdHtml + '</thead>');
});
$('#CurrentHealth_div > .question_body > table > tbody > tr:first-child').remove();
})
</script>