Put this JavaScript and CSS in your question's footer:
<script>
$(document).ready(function(){
$('#GridQ_div > .question_body > table').prepend(`
<thead>
<tr>
</tr>
</thead>
`);
$('#GridQ_div > .question_body > table > tbody > tr:first-child > td').each(function(){
var tdHtml = $(this).html();
$('#GridQ_div > .question_body > table > thead > tr').append('<th>' + tdHtml + '</th>');
});
$('#GridQ_div > .question_body > table > tbody > tr:first-child').hide();
})
</script>
<style>
#GridQ_div > .question_body {
height: 200px;
}
#GridQ_div > .question_body > table {
display: flex;
flex-flow: column;
height: 100%;
width: 100%;
}
#GridQ_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);
}
#GridQ_div > .question_body > table > tbody {
/* body takes all the remaining available space */
flex: 1 1 auto;
display: block;
overflow-y: scroll;
}
#GridQ_div > .question_body > table > tbody > tr {
width: 100%;
}
#GridQ_div > .question_body > table > thead,
#GridQ_div > .question_body > table > tbody > tr {
display: table;
table-layout: fixed;
}
</style>
"GridQ" should be replaced with the name of the question. The value of "200px" can be adjusted as you see fit.
This code was built with grid questions in mind, but it can be easily adjusted to work for any HTML table.
(CSS Source:
http://stackoverflow.com/a/29512692/4425013 )