Row / Column
Column A
Column B
Column C
Column D
Column E
Column F
Column G
Column H
Column I
Column J
Column K
Column L
Column M
Column N
Column O
Column P
Column Q
Column R
Column S
Row 1
Grid Ref. A.1
Grid Ref. B.1
Grid Ref. C.1
Grid Ref. D.1
Grid Ref. E.1
Grid Ref. F.1
Grid Ref. G.1
Grid Ref. H.1
Grid Ref. I.1
Grid Ref. J.1
Grid Ref. K.1
Grid Ref. L.1
Grid Ref. M.1
Grid Ref. N.1
Grid Ref. O.1
Grid Ref. P.1
Grid Ref. Q.1
Grid Ref. R.1
Grid Ref. S.1
Row 2
Grid Ref. A.2
Grid Ref. B.2
Grid Ref. C.2
Grid Ref. D.2
Grid Ref. E.2
Grid Ref. F.2
Grid Ref. G.2
Grid Ref. H.2
Grid Ref. I.2
Grid Ref. J.2
Grid Ref. K.2
Grid Ref. L.2
Grid Ref. M.2
Grid Ref. N.2
Grid Ref. O.2
Grid Ref. P.2
Grid Ref. Q.2
Grid Ref. R.2
Grid Ref. S.2
Row 3
Grid Ref. A.3
Grid Ref. B.3
Grid Ref. C.3
Grid Ref. D.3
Grid Ref. E.3
Grid Ref. F.3
Grid Ref. G.3
Grid Ref. H.3
Grid Ref. I.3
Grid Ref. J.3
Grid Ref. K.3
Grid Ref. L.3
Grid Ref. M.3
Grid Ref. N.3
Grid Ref. O.3
Grid Ref. P.3
Grid Ref. Q.3
Grid Ref. R.3
Grid Ref. S.3
Row 4
Grid Ref. A.4
Grid Ref. B.4
Grid Ref. C.4
Grid Ref. D.4
Grid Ref. E.4
Grid Ref. F.4
Grid Ref. G.4
Grid Ref. H.4
Grid Ref. I.4
Grid Ref. J.4
Grid Ref. K.4
Grid Ref. L.4
Grid Ref. M.4
Grid Ref. N.4
Grid Ref. O.4
Grid Ref. P.4
Grid Ref. Q.4
Grid Ref. R.4
Grid Ref. S.4
Row 5
Grid Ref. A.5
Grid Ref. B.5
Grid Ref. C.5
Grid Ref. D.5
Grid Ref. E.5
Grid Ref. F.5
Grid Ref. G.5
Grid Ref. H.5
Grid Ref. I.5
Grid Ref. J.5
Grid Ref. K.5
Grid Ref. L.5
Grid Ref. M.5
Grid Ref. N.5
Grid Ref. O.5
Grid Ref. P.5
Grid Ref. Q.5
Grid Ref. R.5
Grid Ref. S.5
Row 6
Grid Ref. A.6
Grid Ref. B.6
Grid Ref. C.6
Grid Ref. D.6
Grid Ref. E.6
Grid Ref. F.6
Grid Ref. G.6
Grid Ref. H.6
Grid Ref. I.6
Grid Ref. J.6
Grid Ref. K.6
Grid Ref. L.6
Grid Ref. M.6
Grid Ref. N.6
Grid Ref. O.6
Grid Ref. P.6
Grid Ref. Q.6
Grid Ref. R.6
Grid Ref. S.6
Row 7
Grid Ref. A.7
Grid Ref. B.7
Grid Ref. C.7
Grid Ref. D.7
Grid Ref. E.7
Grid Ref. F.7
Grid Ref. G.7
Grid Ref. H.7
Grid Ref. I.7
Grid Ref. J.7
Grid Ref. K.7
Grid Ref. L.7
Grid Ref. M.7
Grid Ref. N.7
Grid Ref. O.7
Grid Ref. P.7
Grid Ref. Q.7
Grid Ref. R.7
Grid Ref. S.7
Row 8
Grid Ref. A.8
Grid Ref. B.8
Grid Ref. C.8
Grid Ref. D.8
Grid Ref. E.8
Grid Ref. F.8
Grid Ref. G.8
Grid Ref. H.8
Grid Ref. I.8
Grid Ref. J.8
Grid Ref. K.8
Grid Ref. L.8
Grid Ref. M.8
Grid Ref. N.8
Grid Ref. O.8
Grid Ref. P.8
Grid Ref. Q.8
Grid Ref. R.8
Grid Ref. S.8
Row 9
Grid Ref. A.9
Grid Ref. B.9
Grid Ref. C.9
Grid Ref. D.9
Grid Ref. E.9
Grid Ref. F.9
Grid Ref. G.9
Grid Ref. H.9
Grid Ref. I.9
Grid Ref. J.9
Grid Ref. K.9
Grid Ref. L.9
Grid Ref. M.9
Grid Ref. N.9
Grid Ref. O.9
Grid Ref. P.9
Grid Ref. Q.9
Grid Ref. R.9
Grid Ref. S.9
Row 10
Grid Ref. A.10
Grid Ref. B.10
Grid Ref. C.10
Grid Ref. D.10
Grid Ref. E.10
Grid Ref. F.10
Grid Ref. G.10
Grid Ref. H.10
Grid Ref. I.10
Grid Ref. J.10
Grid Ref. K.10
Grid Ref. L.10
Grid Ref. M.10
Grid Ref. N.10
Grid Ref. O.10
Grid Ref. P.10
Grid Ref. Q.10
Grid Ref. R.10
Grid Ref. S.10
Row 11
Grid Ref. A.11
Grid Ref. B.11
Grid Ref. C.11
Grid Ref. D.11
Grid Ref. E.11
Grid Ref. F.11
Grid Ref. G.11
Grid Ref. H.11
Grid Ref. I.11
Grid Ref. J.11
Grid Ref. K.11
Grid Ref. L.11
Grid Ref. M.11
Grid Ref. N.11
Grid Ref. O.11
Grid Ref. P.11
Grid Ref. Q.11
Grid Ref. R.11
Grid Ref. S.11
Row 12
Grid Ref. A.12
Grid Ref. B.12
Grid Ref. C.12
Grid Ref. D.12
Grid Ref. E.12
Grid Ref. F.12
Grid Ref. G.12
Grid Ref. H.12
Grid Ref. I.12
Grid Ref. J.12
Grid Ref. K.12
Grid Ref. L.12
Grid Ref. M.12
Grid Ref. N.12
Grid Ref. O.12
Grid Ref. P.12
Grid Ref. Q.12
Grid Ref. R.12
Grid Ref. S.12
Row 13
Grid Ref. A.13
Grid Ref. B.13
Grid Ref. C.13
Grid Ref. D.13
Grid Ref. E.13
Grid Ref. F.13
Grid Ref. G.13
Grid Ref. H.13
Grid Ref. I.13
Grid Ref. J.13
Grid Ref. K.13
Grid Ref. L.13
Grid Ref. M.13
Grid Ref. N.13
Grid Ref. O.13
Grid Ref. P.13
Grid Ref. Q.13
Grid Ref. R.13
Grid Ref. S.13
Row 14
Grid Ref. A.14
Grid Ref. B.14
Grid Ref. C.14
Grid Ref. D.14
Grid Ref. E.14
Grid Ref. F.14
Grid Ref. G.14
Grid Ref. H.14
Grid Ref. I.14
Grid Ref. J.14
Grid Ref. K.14
Grid Ref. L.14
Grid Ref. M.14
Grid Ref. N.14
Grid Ref. O.14
Grid Ref. P.14
Grid Ref. Q.14
Grid Ref. R.14
Grid Ref. S.14
Row 15
Grid Ref. A.15
Grid Ref. B.15
Grid Ref. C.15
Grid Ref. D.15
Grid Ref. E.15
Grid Ref. F.15
Grid Ref. G.15
Grid Ref. H.15
Grid Ref. I.15
Grid Ref. J.15
Grid Ref. K.15
Grid Ref. L.15
Grid Ref. M.15
Grid Ref. N.15
Grid Ref. O.15
Grid Ref. P.15
Grid Ref. Q.15
Grid Ref. R.15
Grid Ref. S.15
Row 16
Grid Ref. A.16
Grid Ref. B.16
Grid Ref. C.16
Grid Ref. D.16
Grid Ref. E.16
Grid Ref. F.16
Grid Ref. G.16
Grid Ref. H.16
Grid Ref. I.16
Grid Ref. J.16
Grid Ref. K.16
Grid Ref. L.16
Grid Ref. M.16
Grid Ref. N.16
Grid Ref. O.16
Grid Ref. P.16
Grid Ref. Q.16
Grid Ref. R.16
Grid Ref. S.16
Row 17
Grid Ref. A.17
Grid Ref. B.17
Grid Ref. C.17
Grid Ref. D.17
Grid Ref. E.17
Grid Ref. F.17
Grid Ref. G.17
Grid Ref. H.17
Grid Ref. I.17
Grid Ref. J.17
Grid Ref. K.17
Grid Ref. L.17
Grid Ref. M.17
Grid Ref. N.17
Grid Ref. O.17
Grid Ref. P.17
Grid Ref. Q.17
Grid Ref. R.17
Grid Ref. S.17
Row 18
Grid Ref. A.18
Grid Ref. B.18
Grid Ref. C.18
Grid Ref. D.18
Grid Ref. E.18
Grid Ref. F.18
Grid Ref. G.18
Grid Ref. H.18
Grid Ref. I.18
Grid Ref. J.18
Grid Ref. K.18
Grid Ref. L.18
Grid Ref. M.18
Grid Ref. N.18
Grid Ref. O.18
Grid Ref. P.18
Grid Ref. Q.18
Grid Ref. R.18
Grid Ref. S.18
Row 19
Grid Ref. A.19
Grid Ref. B.19
Grid Ref. C.19
Grid Ref. D.19
Grid Ref. E.19
Grid Ref. F.19
Grid Ref. G.19
Grid Ref. H.19
Grid Ref. I.19
Grid Ref. J.19
Grid Ref. K.19
Grid Ref. L.19
Grid Ref. M.19
Grid Ref. N.19
Grid Ref. O.19
Grid Ref. P.19
Grid Ref. Q.19
Grid Ref. R.19
Grid Ref. S.19
Row 20
Grid Ref. A.20
Grid Ref. B.20
Grid Ref. C.20
Grid Ref. D.20
Grid Ref. E.20
Grid Ref. F.20
Grid Ref. G.20
Grid Ref. H.20
Grid Ref. I.20
Grid Ref. J.20
Grid Ref. K.20
Grid Ref. L.20
Grid Ref. M.20
Grid Ref. N.20
Grid Ref. O.20
Grid Ref. P.20
Grid Ref. Q.20
Grid Ref. R.20
Grid Ref. S.20
Information
Just CSS. Absolutely NO jQuery/javascript or any other programming language.
Also NO classnames or ids. Just plain HTML.
A table using display:grid having a 'fixed' header and left column, with horizontal and vertical scroll snapping. The scroll snapping ensures that the columns and rows snap to the header and left column when scrolling.
All the styling is done using child selectors, so no need for class or id on the grid elements.
The use of <span></span> at the end of each row and at the end of the table grid is my hack for Firefox, which at the moment (1st November 2022) has a bug when using Sticky and scroll-snap together.
The stylesheet for this demonstration is in the page head, but if you use this, please keep my copyright comment with the stylesheet.