Maison >interface Web >tutoriel CSS >Comment créer un en-tête et une colonne fixes dans un tableau en utilisant uniquement CSS ?
En-tête et colonne fixes dans un tableau à l'aide de CSS pur
Créer un tableau avec un en-tête et une première colonne fixes à l'aide de CSS pur peut être obtenu en utilisant la position : propriété collante. Cette approche est plus efficace et compatible avec tous les navigateurs que les solutions s'appuyant sur JavaScript ou jQuery.
Solution :
Retourner le tableau dans un conteneur :
`
Activer le défilement sur le conteneur :
`div.container {
overflow: scroll;
}`
Coller la table en-tête :
`thead th {
position : -webkit-sticky ; / pour Safari /
position : sticky;
top : 0;
}`
Sticky la première colonne :
`tbody th {
position : -webkit-sticky ; / pour Safari /
position : collant;
gauche : 0;
}`
Facultatif : Collant l'en-tête de la première colonne en haut à gauche :
`thead th:first-child {
gauche : 0;
z-index : 2;
}`
Notes supplémentaires :
Exemple :
<div class="container"> <table border="1"> <thead> <tr> <th>#</th> <th>Name</th> <th>Email</th> <th>Phone</th> </tr> </thead> <tbody> <tr> <th>1</th> <td>John Doe</td> <td>john@example.com</td> <td>(555) 123-4567</td> </tr> <tr> <th>2</th> <td>Jane Smith</td> <td>jane@example.com</td> <td>(555) 234-5678</td> </tr> <!-- More rows... --> </tbody> </table> </div>
div.container { max-width: 500px; max-height: 300px; overflow: scroll; } thead th { position: sticky; top: 0; } tbody th { position: sticky; left: 0; } thead th:first-child { left: 0; z-index: 2; }
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!