CODEWITHSUNDEEP
mediawikiwiki-markup
ikou
ikou

Reputation: 1

How to lock the first row and column of a table?

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?

Upvotes: 0

Views: 482

Answers (1)

Alexander Mashin
Alexander Mashin

Reputation: 4617

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>

Upvotes: 0

Related Questions