Hello,

I’m working on a MaxDiff where we are displaying images and text and I’d like to get the “most preferred” and “least preferred” labels to scroll with the choice selections.  I have some CSS in place to balance the columns out and was hoping to use that to get the header to follow along with the choices.

Here’s what I’ve tried.  Credit to copilot which also provided a JavaScript option but I’m not sure where the JS goes in a MaxDiff.

/* Make the header row sticky */
.HeaderRow {
    position: -webkit-sticky; /* For Safari */
    position: sticky;
    top: 0;
    background-color: white;
    z-index: 1000;
}

/* Adjust the width of the columns */
thead th.c4, thead th.c5 {
    width: 5% !important;
}
thead td.c4 {
    width: 90% !important;
}