Qualtrics -- Freeze first column and first row for side by side questions for better scrolling using position -webkit-sticky

Question

I am trying to write custom CSS on a side by side question in Qualtrics such that both my first column and first row can be frozen panes. For example, I have 25 rows and 10 columns, with the first row containing answers and first column containing options. The high number of options necessitates scrolling both horizontally and vertically, especially while on mobile. In order to freeze panes I tried using the CSS position: webkit-sticky functionality. It works successfully on the first column. However, it does not work on the top row.

My code:

.QuestionBody {  position: relative;  }

.Headings th {  position: -webkit-sticky;    position: sticky;    background-color: grey;    top: 0px;  }

.Answers th {  position: -webkit-sticky;    position: sticky;    background-color: blue;    top: 0px;  }

.Choice th {  position: -webkit-sticky;    position: sticky;    background-color: whitesmoke;    left: 0px;  }

Only the .Choice line works at the moment.

• Note: When I change the alignment in .Headings and .Answers to left from the current top, the top column (heading and answers) sticks to the left of the container.