Double Scrollbar with Plugin Jquery in table

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="keyword" content="NGLESSON">
    <meta name="author" content="Mezgani said">
    <meta name="copyright" content="NGLESSON">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>2WDScroll Double Scrollbar Plugin Example</title>
    <link href="https://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/4.5.2/superhero/bootstrap.min.css">
</head>
<body>
        <div class="container mt-5 mb-5">
        <div class="row my-3">
            <div class="col-12">
                <div id="example" class="ts pt-2">
                    <table style="width:600px;" class="table table-bordered table-striped">
                      <tr>
                        <th>Firstname</th>
                        <th>Lastname</th>
                        <th>Age</th>
                      </tr>
                      <tr>
                        <td>Mohammed</td>
                        <td>Idrissi</td>
                        <td>60</td>
                      </tr>
                      <tr>
                        <td>Mezgani</td>
                        <td>Said</td>
                        <td>74</td>
                      </tr>
                      <tr>
                        <td>Saadia</td>
                        <td>Sadqi</td>
                        <td>50</td>
                      </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" ></script>
    <script src="script.js"></script>
    <script>
        $( document ).ready(function() {
            $('.ts').TwoWDScroll(350,195);
        });
    </script>
    </body>
</html>

                                    
/*
	* TwoWDScroll 1.0.0 (Alias : 2WDScroll) Alpha
    * Description : Can be used to add custom scrollbar on top of defined element in addition to default scrollbar in bottom, end result is a doubled scrollbar
    * Release : 01/01/2021
    * Author : Indunil Ramadasa 
    * https://guirama.medium.com/ 
    * https://github.com/iramguir/2WDScroll
    * https://www.jsdelivr.com/package/npm/2wdscroll 
    
    * Licensed under the GNU Public license v3.0
*/
(function($) {
	$.fn.TwoWDScroll = function(twoD_width,twoD_minWidth=twoD_width) {
        var this_target =  $('#'+$(this).attr('id'));

            var twod_num_matches = $(this).length;
            var twod_matches = new Array();
            $(this).each(function(index){
                var this_target = $(this).attr('id');
                if(this_target.length > 0)
                    twod_matches.push(this_target);
                else
                    TwoWDScrollError('Matched element with no ID found');
            });
        
        
            for(i=0;i < twod_num_matches; i++ )
            {
                var this_2wd_id = twod_matches[i];//this_target.attr('id');   
                var this_2wd_parent_id = this_2wd_id+'_2wdParent';
 
                $("#"+this_2wd_id).wrap( '<div class="twowdwrapper" id="'+this_2wd_parent_id+'"></div>' );

                $('#'+this_2wd_parent_id).css('width',twoD_width);
                $('#'+this_2wd_parent_id).css('min-width',twoD_minWidth); 

                $('#'+this_2wd_parent_id).css('transform','rotateX(180deg)');
                $('#'+this_2wd_parent_id).css('overflow-x','auto');
                $('#'+this_2wd_parent_id).css('overflow-y','visible');            
                $('#'+this_2wd_id).css('transform','rotateX(180deg)');


                var this_2wd_innerWidth = $('#'+this_2wd_parent_id)[0].scrollWidth;

                var this_2wd_footer_html = '<div id="'+this_2wd_id+'_footer" class="twowdfooter" style="max-width:'+twoD_width+'px;overflow-y:hidden;">';
                this_2wd_footer_html += '<div style="width:'+(this_2wd_innerWidth)+'px;height:20px;"  id="'+this_2wd_id+'_footer_scroll">';
                this_2wd_footer_html += '</div></div>';
                $(this_2wd_footer_html).insertAfter('#'+this_2wd_parent_id);

                $('#'+this_2wd_parent_id).scroll(function () { 

                    $('#'+this_2wd_id+'_footer').scrollLeft($('#'+this_2wd_parent_id).scrollLeft());
                });
                $('#'+this_2wd_id+'_footer').scroll(function () { 

                    $('#'+this_2wd_parent_id).scrollLeft($('#'+this_2wd_id+'_footer').scrollLeft());
                });
                
            }          
            
            $('.twowdwrapper').each(function(){
                var elem_id = $(this).attr('id').replace('_2wdParent','');    
                $('#'+ $(this).attr('id')).scroll(function () { 
                    $('#'+elem_id+'_footer').scrollLeft($('#'+elem_id+'_2wdParent').scrollLeft());
                });
            });
                     
            
            $('.twowdfooter').each(function(){
                var elem_id = $(this).attr('id').replace('_footer','');   
                $('#'+ $(this).attr('id')).scroll(function () { 
                    $('#'+elem_id+'_2wdParent').scrollLeft($('#'+elem_id+'_footer').scrollLeft());
                });
            });
        
        
        var TwoWDScrollError = function(msg){
            console.log('2wdScroll Error : '+msg)
        }
    }
})(jQuery);
Vers le haut

Vers le haut

Timeline style01

Timeline style01

Texte Block Posts Style01

Texte Block Posts Style01

Page 404 exemple 01

Page 404 exemple 01

Organization Chart

Organization Chart

Nav Menu style02

Nav Menu style02

Geocoded Locations

Geocoded Locations

Gallery images with bootstrap4 Flexbox

Gallery images with bootstrap4 Flexbox

Form login b4 01

Form login b4 01

Footer Responsive avec Bootstrap4

Footer Responsive avec Bootstrap4

Bootstrap 3 Popover avec html contenu

Bootstrap 3 Popover avec html contenu

Blog post card 01

Blog post card 01