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()); 
    });
});
input file récupérer le nom du fichier

input file récupérer le nom du fichier

Vidéo background en html5 style01

Vidéo background en html5 style01

Triangle Background css 01

Triangle Background css 01

Timeline style05

Timeline style05

Radio button style

Radio button style

Image hover 07

Image hover 07

Form Création de compte

Form Création de compte

Carousel Bootstrap4

Carousel Bootstrap4

Card Bootstrap4 02

Card Bootstrap4 02

Bootstrap4 datepicker

Bootstrap4 datepicker

Asidebar Menu Style01

Asidebar Menu Style01

Asidebar Bootstrap4 style02

Asidebar Bootstrap4 style02