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()); 
    });
});
Ajouter supprimer dynamiquement des lignes sur un tableau

Ajouter supprimer dynamiquement des lignes sur un tableau

Bloc resizable with jquery

Bloc resizable with jquery

Bootstrap3 Sidebar CSS

Bootstrap3 Sidebar CSS

Créer une input search animée

Créer une input search animée

Dropdown right aligned B4

Dropdown right aligned B4

Form login b4 01

Form login b4 01

Image hover Flip Flap Style

Image hover Flip Flap Style

Input range slider HTML style02

Input range slider HTML style02

Page construction avec compte à rebours style02

Page construction avec compte à rebours style02

Table responsive avec css native

Table responsive avec css native

Timeline style02

Timeline style02

up down tr in table with js

up down tr in table with js