Fixed header Table, on scroll using Jquery flickers in IE11 (internet explorer) on click of div scroll bar icon click.

Question

FIXED HEADER TABLE ____When Clicking on scrollbar icon in ie11 flickers when using positioning as i cannot change the structure as it is dynamically coming from different sources and gets in table body structure

<tbody><tr></tr><tr></tr></tbody>

here is the fiddle attached works fine in chrome but when i check in ie it flickers horriblly when clicking on div vertical scrollbar below or above icon

Any Css or html solution is also acceptable until if there is no change in html structure

DEMOJs Fiddle Demo JQUERY

   $(document).ready(function() {
$('#theDiv').on('scroll', function () { 
                $('#headerRow td,#headerRow th').css({'position':'relative','background':'red','top':$('#theDiv').scrollTop()-1});
});
    });

Answer 1

First we wrap #theDiv in a #theDivWrap (using jQuery) and use the css to style it...

The idea is to duplicate header row into a new div appended to #theDivWrap via JS

Now loop through table heading elements and create a div based similar styled heading which will come over table and is prepended to #theDivWrap and stays there forever even on scroll because wrap is not overflow auto...

https://jsfiddle.net/5dqnumh6/39/

Adjust negative margin bottom of .headerRow to suit your needs ;)

Answer 2

As Ie doesn't support overflow property for table group elements. So we can add a workaround to support the required behaviour. Add this css to your fiddle and try it will work.

tbody{display:block;height:auto;}

This will make your flicker go away in ie older versions. Although its a hack to make it work but there is no other pure css way. For more details and explanation you may want to read this link. Updated fiddle is here. But as you told me flickering not goes away.A workaround exists but it requires changing in ie settings. Go to internet options, navigate to advanced and scroll down until you see browsing section and uncheck "enable smooth scrolling". But I don't know whether it suits your requirement or not