On

If a Table is too long with too many rows, then some users forget context what each column represents. So, you should lock table headers. CSS Code mentioned below keeps table header visible while user scrolls the table, and it helps users maintain context without forgetting what each column represents.



Live Preview

First check the Live Preview of Sticky Table Header in raw HTML and CSS on Github. Are you satisfied? You don't need a long and complex code. Just add the following CSS Code. Obviously change the class name from 'LockedHeaderExample' to yours.



CSS Code

<style>

table.LockedHeaderExample {
  border-collapse: separate !important;
  border-spacing: 0;
}

table.LockedHeaderExample thead th {
  position: -webkit-sticky !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 999 !important;
  background-color: yellow;
  border-top: 1px solid #AAAAAA;
}

</style>



Troubleshooting

If you use other Sticky contents or Sticky sidebar, it may not work properly. Then you will have to use a <div> wrapper, and few extra code.

here is HTML Part:


<div class="LockedHeaderExampleWrapper">
<table class="LockedHeaderExample">
....
</table>
</div>

Add this CSS Code also


<style>

.LockedHeaderExampleWrapper {
  max-height: 500px;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

</style>



Live Preview of 2nd Example


Head 1 Head 2 Head 3 Head 4 Head 5
Cell 1 - 1 Cell 2 - 1 Cell 3 - 1 Cell 4 - 1 Cell 5 - 1
Cell 1 - 2 Cell 2 - 2 Cell 3 - 2 Cell 4 - 2 Cell 5 - 2
Cell 1 - 3 Cell 2 - 3 Cell 3 - 3 Cell 4 - 3 Cell 5 - 3
Cell 1 - 4 Cell 2 - 4 Cell 3 - 4 Cell 4 - 4 Cell 5 - 4
Cell 1 - 5 Cell 2 - 5 Cell 3 - 5 Cell 4 - 5 Cell 5 - 5
Cell 1 - 6 Cell 2 - 6 Cell 3 - 6 Cell 4 - 6 Cell 5 - 6
Cell 1 - 7 Cell 2 - 7 Cell 3 - 7 Cell 4 - 7 Cell 5 - 7
Cell 1 - 8 Cell 2 - 8 Cell 3 - 8 Cell 4 - 8 Cell 5 - 8
Cell 1 - 9 Cell 2 - 9 Cell 3 - 9 Cell 4 - 9 Cell 5 - 9
Cell 1 - 10 Cell 2 - 10 Cell 3 - 10 Cell 4 - 10 Cell 5 - 10
Cell 1 - 11 Cell 2 - 11 Cell 3 - 11 Cell 4 - 11 Cell 5 - 11
Cell 1 - 12 Cell 2 - 12 Cell 3 - 12 Cell 4 - 12 Cell 5 - 12
Cell 1 - 13 Cell 2 - 13 Cell 3 - 13 Cell 4 - 13 Cell 5 - 13
Cell 1 - 14 Cell 2 - 14 Cell 3 - 14 Cell 4 - 14 Cell 5 - 14
Cell 1 - 15 Cell 2 - 15 Cell 3 - 15 Cell 4 - 15 Cell 5 - 15
Cell 1 - 16 Cell 2 - 16 Cell 3 - 16 Cell 4 - 16 Cell 5 - 16
Cell 1 - 17 Cell 2 - 17 Cell 3 - 17 Cell 4 - 17 Cell 5 - 17
Cell 1 - 18 Cell 2 - 18 Cell 3 - 18 Cell 4 - 18 Cell 5 - 18
Cell 1 - 19 Cell 2 - 19 Cell 3 - 19 Cell 4 - 19 Cell 5 - 19
Cell 1 - 20 Cell 2 - 20 Cell 3 - 20 Cell 4 - 20 Cell 5 - 20
Cell 1 - 21 Cell 2 - 21 Cell 3 - 21 Cell 4 - 21 Cell 5 - 21
Cell 1 - 22 Cell 2 - 22 Cell 3 - 22 Cell 4 - 22 Cell 5 - 22
Cell 1 - 23 Cell 2 - 23 Cell 3 - 23 Cell 4 - 23 Cell 5 - 23
Cell 1 - 24 Cell 2 - 24 Cell 3 - 24 Cell 4 - 24 Cell 5 - 24
Cell 1 - 25 Cell 2 - 25 Cell 3 - 25 Cell 4 - 25 Cell 5 - 25
Cell 1 - 26 Cell 2 - 26 Cell 3 - 26 Cell 4 - 26 Cell 5 - 26
Cell 1 - 27 Cell 2 - 27 Cell 3 - 27 Cell 4 - 27 Cell 5 - 27
Cell 1 - 28 Cell 2 - 28 Cell 3 - 28 Cell 4 - 28 Cell 5 - 28
Cell 1 - 29 Cell 2 - 29 Cell 3 - 29 Cell 4 - 29 Cell 5 - 29
Cell 1 - 30 Cell 2 - 30 Cell 3 - 30 Cell 4 - 30 Cell 5 - 30