Freeze panes

Question

Dear All,

How could i use freeze panes for question? I mean that when i scroll down we always see the title.

Thanks,

Answer 1

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 )

Comments

Dear Zachary,

That is not working. Do you have any way?

---

Are you able to send me a .ssi file with your grid question?  My email address is just my name at sawtoothsoftware.com.

---

Is this your mail: zachary@sawtoothsoftware.com

---

Exactly.

---

I already sent, please let check.