Bonjour,

J'aimerais de l'aide concernant l'ajout d'une scrollbar pour mon tableau avec mon en tête fixe. Sur le screen si dessous ma scroll bar fonctionne, seulement mon thead ne se met pas correctement, si vous avez une idée je suis preneur merci beaucoup ! 

Html :  

<table class="table-style">
                <thead>
                    <tr>
                        <th>Nom</th>
                        <th>Prénom</th>
                        <th>Télèphone</th>
                        <th>E-mail</th>
                        <th>Adresse</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Doe</td>
                        <td>John</td>
                        <td>00000000</td>
                        <td>johndoe@gmail.com</td>
                        <td>1 rue du blablabla france</td>
                    </tr>
                    <tr>
                        <td>Content</td>
                        <td>Content</td>
                        <td>Content</td>
                        <td>Content</td>
                        <td>Content</td>
                    </tr>
                    <tr>
                        <td>Content</td>
                        <td>Content</td>
                        <td>Content</td>
                        <td>Content</td>
                        <td>Content</td>
                    </tr>
                    <tr>
                        <td>Content</td>
                        <td>Content</td>
                        <td>Content</td>
                        <td>Content</td>
                        <td>Content</td>
                    </tr>
                    <tr>
                        <td>Content</td>
                        <td>Content</td>
                        <td>Content</td>
                        <td>Content</td>
                        <td>Content</td>
                    </tr>
                    <tr>
                        <td>Content</td>
                        <td>Content</td>
                        <td>Content</td>
                        <td>Content</td>
                        <td>Content</td>
                    </tr>
                    <tr>
                        <td>Content</td>
                        <td>Content</td>
                        <td>Content</td>
                        <td>Content</td>
                        <td>Content</td>
                    </tr>
                    <tr>
                        <td>Content</td>
                        <td>Content</td>
                        <td>Content</td>
                        <td>Content</td>
                        <td>Content</td>
                    </tr>
                </tbody>
            </table>   
        </div>

CSS : 

.table-style{
    border-collapse: collapse;
    box-shadow: 0 5px 50px rgba(0,0,0,0.15);
    margin: 0px auto;
    border: 2px solid black;
}

tbody{
    display:block;
    max-height:265px;
    overflow-y: auto;
}

thead{
    display: block;
}

thead tr {
    background-color: black;
    color: #fff;
    text-align: left;
}

th, td {
    padding: 15px 20px;
    text-align: center;
}

tbody tr, td, th {
    border: 1px solid #ddd;
}

tbody tr:nth-child(even){
    background-color: #f3f3f3;
}

::-webkit-scrollbar {
    width: 6px;
} 
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
} 
::-webkit-scrollbar-thumb {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
}

Bonjour.

Les tables se conduisent d'une manière particulières, et toutes leur subtilités au niveau du display m'échappent encore.

Perso, voilà comment je résous cette affaire.

Je place la table dans un div.

sur ce div j'applique :

max-height: 265px;
display: inline-block;
overflow: auto;

Ensuite, sur la première ligne de la table (thead dans ton cas), je fais ceci

thead{
   position: sticky;
   top: 0;
}

Et évidemment, je ne modifie pas le display de la table et de ses éléments.

Peut-être quelqu'un aura-t-il mieux à proposer...