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()); 
    });
});
Add Remove dynamic rows with dynamic ID of input in HTML table

Add Remove dynamic rows with dynamic ID of input in HTML table

Ajouter une pagination1

Ajouter une pagination1

Convertir une div en image

Convertir une div en image

Form contact avec validation en css

Form contact avec validation en css

Form login b4 01

Form login b4 01

Input range slider HTML style02

Input range slider HTML style02

Input range slider HTML style04

Input range slider HTML style04

Menu aside style01 slide out

Menu aside style01 slide out

Radio button style

Radio button style

SwiperJS Lazy Load Images

SwiperJS Lazy Load Images

Table responsive avec css native

Table responsive avec css native

Up Down Animation With CSS Style01

Up Down Animation With CSS Style01