I'm currently in the process of moving my companies documentation over into a wikimedia server. There are quite a few very large and expansive excel sheets I would like to transfer over. I have already implemented scrolling for the tables using this div:
<div style="overflow-x: scroll">
But how would I go about locking the first row and column so users don't have to constantly check where they are?
Use sticky:
<div style="height: 20ex; width: 20em; overflow-x: auto; overflow-y: auto">
{| class="wikitable"
!
! style="position: sticky; top: 0;" | Col1
! style="position: sticky; top: 0;" | Col2
! style="position: sticky; top: 0;" | Col3
! style="position: sticky; top: 0;" | Col4
! style="position: sticky; top: 0;" | Col5
! style="position: sticky; top: 0;" | Col6
! style="position: sticky; top: 0;" | Col7
! style="position: sticky; top: 0;" | Col8
! style="position: sticky; top: 0;" | Col9
! style="position: sticky; top: 0;" | Col10
|-
! style="position: sticky; left: 0;" | Row 1
| Cell 1,1 || Cell 1,2 || Cell 1,3 || Cell 1,4 || Cell 1,5 || Cell 1,6 || Cell 1,7 || Cell 1,8 || Cell 1,9 || Cell 1,10
(many more rows)
|}
</div>
