1

In order to avoid header scrolling with the table when the table is scrollable for IE 11, I am using 

document.querySelectorAll('.tableWrapper').forEach((tableWrapper) => {
      tableWrapper.addEventListener('scroll', () => {
      var translate = 'translate(0,' + tableWrapper.scrollTop + 'px)'
      tableWrapper.querySelector('thead').style.transform = translate
})

but the header vibrates when scrolling the table. Does anyone have a solution to avoid header flickering while scrolling the table?

I used position: sticky but IE 11 doesn't support it. It works for other browsers.

The header flickers constantly when scrolling a long table. The header should remain at the top while the user scrolls up and down.

sw dev
  • 11
  • 2
  • can you share the HTML also? – Kannan G Sep 02 '19 at 08:10
  • https://stackoverflow.com/questions/37646066/position-sticky-buttons-not-working-in-ie-11 – Jaromanda X Sep 02 '19 at 08:17
  • Thank you jaromanda X. But the top:0 position sticks the header at the top most part of the page. My table is at the bottom of the page. – sw dev Sep 02 '19 at 21:09
  • Kannan G , it is the same for all kinds of tables. A simple table with header like below https://stackoverflow.com/questions/44001954/css-only-sticky-table-headers-in-chrome you can experment by adding more rows and adding a scrollbar. – sw dev Sep 02 '19 at 21:14
  • Do you have a requirement to enable sticky headers on the tables for IE11? This obviously is not an answer to your question; but as front-end developer, it's usually easy to sell this one; as without sticky headers your table will still be accessible enough, likely you won't even need to scroll much as IE11 is desktop only. JS fixes for these kind of problems for 1% of browser usage seems like bloat and overkill to me, suggestion is to just fix it for non IE. – Mathijs Segers Sep 03 '19 at 06:52
  • The company uses IE 11 as official browser. – sw dev Sep 04 '19 at 07:15

1 Answers1

0

Awhile back I struggled with this particular issue in IE. I managed to get it to work perfectly with this plugin. It has some setup but works very smoothly

https://tympanus.net/codrops/2014/01/09/sticky-table-headers-columns/

JStanton
  • 425
  • 5
  • 12
  • This is a good find but we are looking for custom code. We don't want to add third party plugins. – sw dev Sep 04 '19 at 19:41