Previous Demo Back to the Codrops Article

Sticky Table Headers Revisited Creating functional and flexible sticky table headers

Biaxial headers

Biaxial headers are possible — this is for situations where both horizontal and vertical headers are needed.

The example below has the first cell wrapped in <th> instead of <td>:

Sample ID Reading #1 Reading #2 Reading #3 Reading #4 Reading #5
Sample #1 52 40 9 47 31
Sample #2 27 55 97 52 19
Sample #3 36 68 89 78 60
Sample #4 95 46 62 24 14
Sample #5 19 66 31 99 77
Sample #6 57 15 57 9 11
Sample #7 69 46 16 33 85
Sample #8 18 93 84 57 35
Sample #9 92 10 69 35 0
Sample #10 4 87 51 22 19
Sample #11 24 23 85 34 83
Sample #12 92 6 67 65 12
Sample #13 10 77 64 51 63
Sample #14 65 85 42 90 94
Sample #15 34 48 38 6 21
Sample #16 26 72 47 27 43
Sample #17 79 86 85 10 10
Sample #18 39 68 91 71 74
Sample #19 70 4 59 82 10
Sample #20 63 16 62 28 13

eu, magna. Suspendisse facilisis gravida, nisl pellentesque sagittis vel, accumsan fringilla orci. Ut rhoncus dolor ac nibh ut justo. Vivamus faucibus vestibulum. Nunc ut venenatis nulla. eu, magna. Suspendisse facilisis gravida, nisl pellentesque sagittis vel, accumsan fringilla orci. Ut rhoncus dolor ac nibh ut justo. Vivamus faucibus vestibulum. Nunc ut venenatis nulla. eu, magna. Suspendisse facilisis gravida, nisl pellentesque sagittis vel, accumsan fringilla orci. Ut rhoncus dolor ac nibh ut justo. Vivamus faucibus vestibulum. Nunc ut venenatis nulla.