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 supprimer dynamiquement des lignes sur un tableau

Ajouter supprimer dynamiquement des lignes sur un tableau

Alert Bootstrap4 style01

Alert Bootstrap4 style01

Background div gradient

Background div gradient

Blog post card 01

Blog post card 01

Form login 03

Form login 03

Image hover 07

Image hover 07

Loading style book loader

Loading style book loader

Loading style water animation

Loading style water animation

Pie Charts

Pie Charts

Transitions Animations SVG Style01

Transitions Animations SVG Style01

creation dune icone de prechargement avec css

creation dune icone de prechargement avec css