Lorsque l’on doit gérer les tables d’une base de données relativement importante et qu’on les consulte via un navigateur dans une page en PHP, il est plus agréable de conserver l’intitulé de chaque colonne toujours visible sur la première ligne.
Sans cela, l’utilisateur se retrouve avec un écran rempli d’informations parfois difficiles à identifier.
Pour cela, il faut donc fixer la première ligne de manière à ce qu’elle reste toujours à l’écran, tout en permettant au reste du tableau d’être scrollé pour pouvoir consulter la Data.
Si la tâche est très simple pour les balises <DIV> avec un « position: fixed; » dans le CSS, elle ne l’est pas autant avec les cellules d’un tableau…
Mais ça devrait aller quand même 😉
Une solution simple avec Jquery
La SlamsOft Corporation vous propose une solution Jquery afin d’empêcher le scroll de la première ligne de votre tableau, et ainsi rendre plus ergonomique, la lecture de vos données.
Pour commencer vous allez devoir appeler les Scripts suivants en plaçant le code ci-dessous dans votre <head> :
<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.0.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/sticky-table-headers@0.1.24/js/jquery.stickytableheaders.min.js"></script>
<script type="text/javascript">
$(function() {
$("table").stickyTableHeaders();
});
</script>
Si vous préférez éviter d’appeler un Script via une URL, vous pouvez aussi copier le code sur les liens suivants et créer vos pages de JS :
https://code.jquery.com/jquery-3.4.0.min.js
https://unpkg.com/sticky-table-headers@0.1.24/js/jquery.stickytableheaders.min.js
En faisant ainsi, n’oubliez pas de rediriger la source de votre code vers le bon fichier JS.
Rentrez ensuite le code html de votre tableau :
<table>
<thead>
<tr>
<th>Ligne1-colonne1</th>
<th>Ligne1-colonne2</th>
<th>Ligne1-colonne3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ligne2-colonne1</td>
<td>Ligne2-colonne2</td>
<td>Ligne2-colonne3</td>
</tr>
<tr>
<td>Ligne3-colonne1</td>
<td>Ligne3-colonne2</td>
<td>Ligne3-colonne3</td>
</tr>
</tbody>
</table>Une fois que vous aurez fait tout cela, vous obtiendrez le résultat espéré.
La SlamsOft Corporation vous remercie de votre visite dans ce Tube et vous souhaite une bonne journée.