Double Scrollbar style in table 01

<!DOCTYPE html>
<html>
<head>
    <title>Double Scrollbar style in table</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keyword" content="NGLESSON">
    <meta name="author" content="Mezgani said">
    <meta name="copyright" content="NGLESSON">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet">
    <link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container"> 
    <div class="row mt-5 mb-5"> 
        <div id="scrolltop" class="scroll" >
            <div></div>
        </div>
        <div id="scrollbottom" class="scroll">
            <table id="table" class="table table-hover">
                <thead class="table-info">
                    <tr>
                        <th>N°</th>
                        <th>Nom</th>
                        <th>Prénom</th>
                        <th>Age</th>
                        <th>Pays</th>
                        <th>Ville</th>
                        <th>Origine</th>
                        <th>Métier</th>
                        <th>Diplome</th>
                        <th>Expérience</th>
                        <th>Salaire</th>
                        <th>Adresse</th>
                        <th>Image</th>
                        <th>Site web</th>
                        <th>Application</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>01245</td>
                        <td>Mezgani</td>
                        <td>Said</td>
                        <td>33 ans</td>
                        <td>Maroc </td>
                        <td>Rabat</td>
                        <td>OUlmess</td>
                        <td>Développeur web</td>
                        <td>Ingénieur</td>
                        <td>7ans</td>
                        <td>30 000</td>
                        <td>Rabat, CYM</td>
                        <td>Images.png</td>
                        <td>https://www.mezganisaid.com/</td>
                        <td>https://www.nglesson.com/</td>
                    </tr>
                    <tr>
                        <td>01245</td>
                        <td>Mezgani</td>
                        <td>Said</td>
                        <td>33 ans</td>
                        <td>Maroc </td>
                        <td>Rabat</td>
                        <td>OUlmess</td>
                        <td>Développeur web</td>
                        <td>Ingénieur</td>
                        <td>7ans</td>
                        <td>30 000</td>
                        <td>Rabat, CYM</td>
                        <td>Images.png</td>
                        <td>https://www.mezganisaid.com/</td>
                        <td>https://www.nglesson.com/</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="script.js"></script>
</body>
</html>
#scrolltop div {
    height: 1px;
    margin: 0;
}
.table{
    margin-top: 1rem;
    margin-bottom: 1rem;
}
.scroll{overflow-x:auto;}

/****************Style scroll*******************************/
#scrolltop::-webkit-scrollbar,
#scrollbottom::-webkit-scrollbar{-webkit-appearance:none;}
#scrolltop::-webkit-scrollbar:vertical,
#scrollbottom::-webkit-scrollbar:vertical{width:12px;}
#scrolltop::-webkit-scrollbar:horizontal,
#scrollbottom::-webkit-scrollbar:horizontal{height:12px;}
#scrolltop::-webkit-scrollbar-thumb,
#scrollbottom::-webkit-scrollbar-thumb{background-color: rgba(0,0,0,0.5);border-radius:10px;border:2px solid #FFF;}
#scrolltop::-webkit-scrollbar-track,
#scrollbottom::-webkit-scrollbar-track{border-radius:10px;background-color:#ffffff;}
$("document").ready(function(){
    $("#scrolltop div").width($("#table").width());
    $("#scrolltop").on("scroll", function(){
        $("#scrollbottom").scrollLeft($(this).scrollLeft()); 
    });
    $("#scrollbottom").on("scroll", function(){
        $("#scrolltop").scrollLeft($(this).scrollLeft()); 
    });
});
page scroll progress bar

page scroll progress bar

input file récupérer le nom du fichier

input file récupérer le nom du fichier

Timeline style01

Timeline style01

Input range slider HTML style01

Input range slider HTML style01

Form Création de compte style animée

Form Création de compte style animée

Créer des tds dynamiquement dans une table html

Créer des tds dynamiquement dans une table html

Convertir une div en image

Convertir une div en image

Compteur avec b4

Compteur avec b4

Comment intégrer yamli dans une input

Comment intégrer yamli dans une input

ChartJS style01

ChartJS style01

Bootstrap3 Sidebar CSS

Bootstrap3 Sidebar CSS

Asidebar Menu Style01

Asidebar Menu Style01